Question

我找到了很多用于在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”中阅读，nad也阅读了我的script.js文件。对于我添加了data.js文件的数据

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

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

我已经更新了你的plunker。

请参阅：plunker。

Answer 2

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

是的，你可以在用户列表上写.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

 <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">

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

2 个答案: