如何在指令的控制器中使用 $scope 变量制作过滤器 [英] how to make filters with $scope variables inside controllers of directives

问题描述

我发现了很多用 angular JS 编写代码的约定.我正在使用以下约定.

app.directive("employeeList" , function(){返回 {限制 : 'E' ,templateUrl: 'employee-list.html',控制器:功能($scope，$filter){$scope.emp_positions = position_json;//我的 FIREST 数组$scope.emp_users_json = users_json;//我的第二个数组//我的代码逻辑////我想在这里制作可以使用 $SCOPE 变量的过滤器.有什么办法可以在这里制作过滤器$SCOPE.FILTER('FLITER_NAME' , FUNCTION($SCOPE)){....} ???是否可以?如果不是什么可能是其他可能的方式.//},控制器为:'emp'};});

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

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

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

解决方案

更新:

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

1) 您可以将作用域变量从指令传递给过滤器作为函数参数，并从 args 对象访问它们:

 app.directive("employeeList" , function(){返回 {限制 : 'E' ,templateUrl: 'employee-list.html',控制器:功能($范围){$scope.emp_positions = position_json;$scope.emp_users_json = users_json;//你的另一个代码在这里},控制器为:'emp'};});

您的employee-list.html

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

您的过滤器:

app.filter('employeeFilter', function () {返回函数(输入，参数){控制台日志(参数[0])；//$scope.emp_positions 在这里控制台日志(参数[1])；//$scope.emp_users_json 这里var inputArray = 输入；返回输入数组；}});

2) 您可以通过传递 this 将整个 $scope 传递给过滤器.

this 将是对当前作用域的引用.

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

您的过滤器:

app.filter('employeeFilter', function () {返回函数(输入，参数){控制台日志(参数[0])；//来自指令的整个 $scope 在这里var inputArray = 输入；返回输入数组；//过滤器返回值//在这种情况下，返回的数组等于初始输入}});

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

我已经更新了你的 plunker.

请参阅:plunker.

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

解决方案

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.

这篇关于如何在指令的控制器中使用 $scope 变量制作过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！