如何在指令的控制器中使用 $scope 变量制作过滤器答案

【问题标题】：how to make filters with $scope variables inside controllers of directives如何在指令的控制器中使用 $scope 变量制作过滤器
【发布时间】：2014-10-15 10:57:36
【问题描述】：

我发现了很多用 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'  
      };
 });

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

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

我已经添加了我的 plunker，请在表“POSITION HERE”中阅读并阅读我的 script.js 文件。对于数据，我添加了 data.js 文件

【问题讨论】：

标签： jquery angularjs angularjs-directive angularjs-scope

【解决方案1】：

更新：

关于在过滤器中使用 $scope。

1) 您可以将指令中的作用域变量作为函数参数传递给过滤器，并从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

<div ng-repeat="employee in employees | employeeFilter: [emp_positions, emp_users_json]">
 .....
</div>

您的过滤器：

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) 你可以通过 this 将整个 $scope 传递给过滤器。

this 将是对当前范围的引用。

<div ng-repeat="employee in employees | employeeFilter: this">
     .....
</div>

您的过滤器：

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
    }
});

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

我已经更新了你的 plunker。

请看：plunker。

【讨论】：

如何在这个过滤器中使用 $scope 变量
@ShivekParmar，您可以在 args 对象的过滤器中使用 $scope.variables。查看我的更新。
但我必须在我的范围变量中使用不同的数组。我想显示在第一个中找到一条记录，并在第二个中显示相同的记录，但键不同。但是根据您的解决方案，如果我在指令中使用 app.filter() ，那么它将无法访问完整的 $scope 变量。因为它在控制器外面。并且为了记录，我也不喜欢你的第二个解决方案。
我正在尝试使用 {{employee in employees | employeeFilter:(empid)" }} 但由于其他包含 empid 的数组只能在范围内访问。我已经更新了我的问题以获得更多说明。
@ShivekParmar，你能用你的例子创建 JSFiddle 或 Plunker 吗？因为我不太清楚你想要什么。

【解决方案2】：

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

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

 /*
    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

 <tr ng-repeat="empdata in getUsers()">

演示：Plunker

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

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

$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：<tr ng-repeat="empdata in filteredUserList">

【讨论】：