从AngularJS中的过滤器访问范围变量


74

我通过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;
    }
  });

我也想在其中注入几个范围变量,就像我在指令中可以做的那样。不必将这些var作为函数参数显式传递就可以做到这一点吗?

Answers:


125

显然可以。

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

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. 请注意这一点,并仅使用作用域来读取过滤器内部的值,否则您将很容易在$ digest循环中发现自己。
  2. 需要这种“大量”依赖关系(整个范围)的过滤器往往很难测试。

感谢您的全面答复。我想最好将这些变量显式传递给过滤器。
谢尔盖·巴沙罗夫

谢谢!对于其他阅读此内容的人,ng-bind-html-unsafe除非传递html,否则不必使用。同样,我用$scope代替,scope所以它在过滤器功能内与我在其他地方都一样:)
Wade

如果您确实需要更新作用域变量,则应将过滤器移至Controller。这样,它就没有“繁重的”依赖关系,并且更易于测试。只需$filter('filter')(array, expression, comparator, anyPropertyKey)Controller
ghiscoding '17

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.