Access scope variables from a filter in AngularJS

Question

I am passing date value to my custom filter this way:

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

I would like to inject a couple of scope variables there too, like what I can do in directives. Is that possible to do this without having to passing these vars explicitly as function arguments?

Community · Accepted Answer · 2020-06-20 09:12:55Z

126

Apparently you can.

Usually you would pass scope variables to the filter as function parameter:

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

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

But, to pass the current scope in, you'd have to pass this:

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

and this will be a reference to current scope:

Simplified:

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

Warning:

Be careful with this and use scope only to read the values inside the filter, because otherwise you will easily find your self in $digest loop.
Filters that require such a "heavy" dependency (the whole scope) tend to be very difficult to test.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 11, 2013 at 15:07

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sergei Basharov Over a year ago

Thanks for the comprehensive answer. I suppose I'd better just pass those variables explicitly to the filter.

CyberPunkCodes Over a year ago

Thanks! For others reading this, you don't have to use ng-bind-html-unsafe unless you are passing html. also, I used $scope instead of scope so it is the same inside the filter's function as I am used to everywhere else :)

ghiscoding Over a year ago

If you really need to update a scope variable, then you should move your filter in the Controller. This way, it doesn't have a "heavy" dependency and is easier to test. Just use $filter('filter')(array, expression, comparator, anyPropertyKey) in the Controller

Himanshu Moradiya · Accepted Answer · 2017-03-22 04:45:03Z

5

I found that this references local $scope. Not sure if this is safe way of accessing it.

edited Mar 22, 2017 at 4:45

Himanshu Moradiya

4,8054 gold badges27 silver badges50 bronze badges

answered Aug 26, 2014 at 19:39

pavel_karoukin

2863 silver badges10 bronze badges

Collectives™ on Stack Overflow

Access scope variables from a filter in AngularJS

2 Answers 2

Warning:

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Warning:

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related