我今天要实现的功能是利用AngularJS来完成客户端过滤器。
list.html页面主要代码如下：
......
<div class='tj_con_tr_ipt' ng-init="reportKey = ''">
<input type='text' class='tj_con_tr_ipts' placeholder='请输入资料名称关键字' ng-model="reportKey"/>
</div>
......
<div class="tj_main_bg"><img src="report/images/bookshelf_background.png" width="100%" height="100%"/></div>
<report-shelf one-shelf-volume="oneShelfVolume"></report-shelf>
......
directive.js页面主要代码如下：
angular.module("decisionMakingApp.report.shelf", ["ngUnderscore","decisionMakingApp.report.service"])
.directive("reportShelf", ["$state","underscore","reportService",
function ($state,underscore,reportService) {
return {
restrict: "E",
replace: true,
scope: {
oneShelfVolume: "=oneShelfVolume"
},
templateUrl: "report/list/template.html",
link: function (scope) {
var _partition = function (items, size) {
var result = underscore.groupBy(items, function (item, i) {
return Math.floor(i / size);
});
return underscore.values(result);
};
......
}
}]);
template.html页面主要代码如下：
......
<li class="tj_mainer_zili" ng-repeat="report in reportShelf | filter:{name:reportKey}" ui-sref="report_viewer({report_name:report.name})">
<div class="tj_mainer_zili_pic"><img src="{{report.cover_url}}" style="96px;height:125px;"/></div>
<div class="tj_mainer_zili_txt">{{report.name}}</div>
</li>
......
在template.html页面过滤器硬编码是能过滤的。但与页面搜索框功能不能实现，不能实现双向绑定。如果没有写指令，而是同一页面，是完全可以实现的。最后发现：
问题就在于绑定的reportKey没有传入模板页面。
第一步是在DOM中像传递参数给函数那样，通过属性来设置值：
在list.html页面在report-shelf自定义指令中加入report-key="reportKey"属性。
第二步在directive.js页面的隔离作用域内加入reportKey : "=reportKey"。
这样的话就是通过属性将DOM中ng-model绑定的值复制到隔离作用域中。完成。