AngularJS向指令传递数据

我今天要实现的功能是利用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="width: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绑定的值复制到隔离作用域中。完成。