Question

88

Access scope variables from a filter in AngularJS

rated 0 times [ 91] [ 3] / answers: 1 / hits: 69739 / 11 Years ago, thu, july 11, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jonathoncamrynv

Add To Favorites

Follow

Total Points: 339

Total Questions: 98

Total Answers: 98

Location: Saint Vincent and the Grenadines

Member since Thu, Oct 15, 2020

4 Years ago

answered 11 Years ago aidan · Accepted Answer

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.