在 AngularJS 中从筛选器访问范围变量

我通过这种方式将 date值传递给我的自定义过滤器:

angular.module('myapp').
filter('filterReceiptsForDate', function () {
return function (input, date) {
var out = _.filter(input, function (item) {
return moment(item.value.created).format('YYYY-MM-DD') == date;
});
return out;
}
});

我还想在那里注入一些范围变量，就像我可以在指令中做的那样。这样做是否可能不需要将这些 vars 显式地作为函数参数传递？

69437 次浏览
小开
最佳答案

显然你可以。

通常，您会将范围变量作为函数参数传递给过滤器:

function MyCtrl($scope){
$scope.currentDate = new Date();
$scope.dateFormat = 'short';
}

<span ng-controller="MyCtrl">\{\{currentDate | date:dateFormat}}</span> // --> 7/11/13 4:57 PM

但是，要传递当前作用域，必须传递 this:

<span ng-controller="MyCtrl">\{\{currentDate | date:this}}</span>

而 this将参考当前的范围:

简化:

app.controller('AppController',
function($scope) {
$scope.var1 = 'This is some text.';
$scope.var2 = 'And this is appended with custom filter.';
}
);
  



app.filter('filterReceiptsForDate', function () {
return function (input, scope) {
return input + ' <strong>' + scope.var2 + '</strong>';
};
});

<div ng-bind-html-unsafe="var1 | filterReceiptsForDate:this"></div>
<!-- Results in: "This is some text. <strong>And this is appended with custom filter.</strong>" -->

PLUNKER

警告:

  1. 注意这一点，并且只使用 scope 读取过滤器内部的值，因为否则您将很容易发现自己处于 $摘要循环中。
  2. 需要这种“重”依赖(整个范围)的过滤器往往很难测试。
小开

我发现 this引用本地 $scope。不确定这是否是访问它的安全方式。


提交答案