how to make filters with $scope variables inside controllers of directives

问题

I have found lot of conventions to write code in angular JS. I am using the following convention.

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

Now I want to write the custom filter for filtering my data which is now in "$scope" variable. 1)Can I write the custom filter inside controller which uses $scope variable. If yes, Then how Please give me example. if not then what else I can do to pass the $scope variable to the custom variable which is outside the Directive.?

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

I have added my plunker please read in table "POSITION HERE" nad also read my script.js file. and for the data i have added data.js file

回答1:

Update:

About using of $scope into the filter.

1) You would pass scope variables from directive to the filter as function parameter and get access to them from args object:

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

Your employee-list.html

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

Your 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) You would pass whole $scope to the filter by passing this.

this will be a reference to current scope.

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

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

P.S. But I suggest to choose the first option and pass only scope variables, not whole $scope.

I've updated your plunker.

Please see: plunker.

回答2:

Can I write the custom filter inside controller which uses $scope variable.

Yes, you can by write .filter() on user list.

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 in employee-list

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

Demo: Plunker

FYI, its not good practice to call list in ng-repeat as method (in my case getUsers()) but that approach does the trick.

---

But you can try to implement the same logic by clone-filter user list, like:

$scope.filteredUserList = angular.copy($scope.emp_users_json.users)
 .filter(function(item)
    {            
       var itemDoesMatch = true;

       // write logic here to filter your stuff

        return itemDoesMatch;
    });

put it into function foo() and fire some watcher that will call foo() on any change.

In this case HTML: <tr ng-repeat="empdata in filteredUserList">

来源：https://stackoverflow.com/questions/26380841/how-to-make-filters-with-scope-variables-inside-controllers-of-directives