AngularJS：如何从控制器向自定义指令传递过滤函数？

我来帮你搞定这个问题——你已经定义了myCustomDirective指令来接收值列表和自定义过滤函数，现在只需要把过滤逻辑正确套用到模板的ng-repeat里就行。先把你的指令代码整理一下（注意原代码里的&是HTML转义字符，实际开发中要用&）：

myapp.directive('myCustomDirective', function ($rootScope) { 
  return { 
    replace: true, 
    restrict: 'E', 
    scope: { 
      values: "=", // 双向绑定父作用域的值列表
      customfilter: "&" // 绑定父作用域的过滤函数
    }, 
    templateUrl: '/Scripts/template.html', 
    link: function (scope, elm, attr) { } 
  } 
});

接下来分两种方式实现模板里的过滤逻辑，你可以选顺手的来：

方式一：直接在模板里写匿名调用逻辑 #

在你的template.html中，直接在filter指令里写一个匿名函数，用来调用父作用域传来的过滤函数：

<tbody>
  <tr ng-repeat="item in values | filter: function(item) { 
    // 注意这里的{item: item}是参数映射，键名要和父作用域过滤函数的参数名一致
    return customfilter({item: item}); 
  }">
    <!-- 这里添加你要渲染的列表内容，比如 -->
    <td>{{item.name}}</td>
    <td>{{item.value}}</td>
  </tr>
</tbody>

方式二：在指令link函数中封装过滤函数（更优雅） #

如果觉得模板里写匿名函数太杂乱，可以在指令的link函数里封装一个简洁的过滤函数，供模板直接调用：

修改指令的link部分：

link: function (scope, elm, attr) {
  // 封装过滤函数，简化模板调用
  scope.applyCustomFilter = function(item) {
    // 参数映射要和父作用域过滤函数的参数名匹配
    return scope.customfilter({item: item});
  };
}

然后模板里就可以直接用这个封装好的函数：

<tbody>
  <tr ng-repeat="item in values | filter: applyCustomFilter">
    <td>{{item.name}}</td>
    <td>{{item.value}}</td>
  </tr>
</tbody>

父作用域调用指令的示例 #

最后别忘了在父作用域里定义值列表和过滤函数，再正确调用指令：

<!-- 父页面中的指令调用 -->
<my-custom-directive 
  values="myParentValueList" 
  customfilter="myParentFilter(item)"
></my-custom-directive>

// 父作用域中的过滤函数示例
$scope.myParentFilter = function(item) {
  // 这里写你的过滤逻辑，比如只显示状态为"active"的项
  return item.status === "active";
};

划重点：customfilter="myParentFilter(item)"里的item参数名，必须和指令里customfilter({item: item})的键名保持一致，这样参数才能正确传递哦。

内容的提问来源于stack exchange，提问作者Moshi