如何在异步事件后触发角度过滤器

Question

I have this simple angular filter based on an injected value. I need to initialize the value asyncrhonously, receiving the data from a $http response. The point is that even if the value has been set correctly, the filter once has been evalueted does not fire a second time. I tried to put $scope.$apply() after angular.module("app").value("deferredValue", "foo"); but in this case I get an error because the $digest is already in progress. How can I fix my code to make it work?

 angular.module("app", []) .value("deferredValue", "") .filter("myfilter", ["deferredValue", function(deferredValue){ return function(input){ if(deferredValue == input) return "1234"; else return "4321"; }; }]) .controller("ctrl", ["$scope","$http", function($scope, $http){ $scope.test = "foo"; $http.get("http://www.google.com").then(function(){ angular.module("app").value("deferredValue", "foo"); }).catch(function(){ angular.module("app").value("deferredValue", "foo"); }); }]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> {{test | myfilter}} </div> 

Answer 1

you should use statefull filter

filter("myfilter", ["deferredValue", function(deferredValue){
    function filter(input){
       if(deferredValue == input)
           return "1234";
       else
           return "4321";
    };
    filter.$stateful = true;

    return filter;
}])

https://docs.angularjs.org/guide/filter#stateful-filters

Answer 2

use model, that can be pass as parameter to the filter.

app
.value("deferredObj", {value:''})
.filter("myfilter", [function(){
  return function(input, defered){
    if(defered == input)
      return "1234";
    else
      return "4321";
  };
}])
.controller("ctrl", ["$scope","http", 'deferredObj', function($scope, http, deferredObj){
  $scope.test = "foo";
  $scope.deferredObj = deferredObj;
  http.get("http://www.google.com").then(function(list){
    $scope.deferredObj.value = 'foo';
  }).catch(function(){
    $scope.deferredObj.value = 'foo';
  });
}]);

markup:

{{test | myfilter : deferredObj.value}}