如何在指令的控制器中使用 $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屋!