javascript - 如何在异步事件后触发 Angular 过滤器

Question

我有这个基于注入(inject)值的简单 Angular 过滤器。 我需要异步初始化值，从 $http 响应接收数据。 关键是即使值设置正确，过滤器一旦被评估也不会触发第二次。我试图在 angular.module("app").value("deferredValue", "foo"); 之后放置 $scope.$apply() 但在这种情况下我得到一个错误，因为 $digest 已经在进行中。 如何修复我的代码以使其正常工作？

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

你应该使用有状态过滤器

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