CODEWITHSUNDEEP
javascriptangularjs
Goro
Goro

Reputation: 998

Refreshing an AngularJS filter after injected service is updated

Is there any way to refresh the output of a filter when the data in an injected service is updated?

I'm injecting a UserPreferenceService into a filter to modify the output–when the UserPreferenceService's data is updated, I'd like to update the output of the filter.

Currently, the UserPreferenceService's data only affects the output of the filter on initial load or when the input is changed in the template and the filter is reapplied:

angular.module('myModule').filter('myFilter', function ($filter, UserPreferenceService) {

    return function (input) {
      var output;

      if (UserPreferenceService.someOption === "foo") {
        output = input + "bar";
      } else {
        output = input + "baz";
      }

      return output;
    }

});

Upvotes: 0

Views: 92

Answers (2)

maurycy
maurycy

Reputation: 8465

If you call a filter in partial (html) the filter will be called again with EACH digest process, so you can enforce it by calling the digest directly, if you are using filter inside JS code that will be a bit more complicated

you can call $scope.$digest() in the scope of controller where the filter is or $scope.$apply() which will trigger $rootScope.$digest and digest ALL the scopes

Upvotes: 2

Sam Marland
Sam Marland

Reputation: 572

I think the problem here is that you're receiving your data in an asynchronous fashion. When you receive data in this fashion Angular doesn't realise there's new data there. You can run $scope.$apply() in a success callback. That will run AngularJS's digest cycle which will then update the data in your Filter.

Angular Docs for $scope.$apply

Upvotes: 0

Related Questions