如何在指令的控制器内使用$ scope变量进行过滤

我已经找到很多用于在angular JS中编写代码的约定。 我使用以下约定。

app.directive("employeeList" , function(){ return { restrict : 'E' , templateUrl: 'employee-list.html', controller:function($scope , $filter) { $scope.emp_positions = positions_json; // my FIREST array $scope.emp_users_json = users_json; // My SECOND Array //My Code Logic // // I WANT TO MAKE FILTER HERE WHICH CAN USE $SCOPE VARIABLE. IS THERE ANY WAY TO MAKE FILTER HERE LIKE $SCOPE.FILTER('FLITER_NAME' , FUNCTION($SCOPE)){....} ??? IS IT POSSIBLE? IF NOT WHAT COULD BE OTHER POSSIBLE WAY. // }, controllerAs: 'emp' }; }); 

现在我想编写自定义filter来过滤我现在在“$ scope”变量中的数据。 1）我可以在使用$ scope变量的控制器内编写自定义filter。 如果是，那么请给我举个例子。 如果没有那么我还能做些什么来将$ scope变量传递给指令之外的自定义变量。

http://plnkr.co/edit/J0xCIP9d5boJzostGEv8?p=preview

我添加了我的plunker请在表“POSITION HERE”中阅读，nad也读了我的script.js文件。 并为数据我添加了data.js文件

Answer 1

更新：

关于在filter中使用$ scope。

1）您可以将范围变量从指令传递给filter作为函数参数，并从args对象访问它们：

  app.directive("employeeList" , function(){ return { restrict : 'E' , templateUrl: 'employee-list.html', controller:function($scope) { $scope.emp_positions = positions_json; $scope.emp_users_json = users_json; //your another code here }, controllerAs: 'emp' }; }); 

您的employee-list.html

 
 .....  

你的filter：

 app.filter('employeeFilter', function () { return function (input, args) { console.log(args[0]); //$scope.emp_positions here console.log(args[1]); //$scope.emp_users_json here var inputArray = input; return inputArray; } }); 

2）您可以通过传递将整个$ scope传递给filter。

this将是对当前范围的参考。

 
 .....  

你的filter：

 app.filter('employeeFilter', function () { return function (input, args) { console.log(args[0]); //whole $scope from directive here var inputArray = input; return inputArray; //returned value from filter // in this case returned array equals to the initial input } }); 

PS但我建议选择第一个选项并仅传递范围变量，而不是整个$ scope。

我已经更新了你的plunker。

请参阅： plunker 。

Answer 2

我可以在使用$ scope变量的控制器内编写自定义filter吗？

是的，你可以在用户列表上写上.filter() 。

JS

  /* load all users and filter them according to condition */ $scope.getUsers = function(){ return $scope.emp_users_json.users .filter(function(item) { var itemDoesMatch = true; // write logic here to filter your stuff return itemDoesMatch; }); } 

员工列表中的HTML

演示： Plunker

仅供参考，在ng-repeat调用list作为方法（在我的例子中是getUsers() ）并不是一个好习惯，但这种方法可以解决问题。

---

但您可以尝试通过克隆filter用户列表实现相同的逻辑，例如：

 $scope.filteredUserList = angular.copy($scope.emp_users_json.users) .filter(function(item) { var itemDoesMatch = true; // write logic here to filter your stuff return itemDoesMatch; }); 

将它放入函数foo()并激活一些将在任何更改时调用foo()观察器。

在这种情况下， HTML ：