Access scope variables from a filter in AngularJS
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>" -->
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.
I found that this
references local $scope
. Not sure if this is safe way of accessing it.