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

【问题标题】：How to fire angular filter after async event如何在异步事件后触发角度过滤器
【发布时间】：2017-02-19 21:22:05
【问题描述】：

我有这个基于注入值的简单角度过滤器。我需要异步初始化值，从$http 响应接收数据。关键是即使值设置正确，过滤器一旦被评估也不会再次触发。我尝试将$scope.$apply() 放在angular.module("app").value("deferredValue", "foo"); 之后，但在这种情况下我收到错误消息，因为$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>

【问题讨论】：

您可以在过滤器中初始化数据。请查看这个问题：LINK
除非test 的值发生变化，否则不会调用过滤器。你可以让它有状态，但是它会在每个摘要循环中被调用。
当您将deferredValue 设置为空字符串时，它将被注入您的过滤器。更新此服务不会将服务重新注入过滤器。如果您通过代码进行调试，您可以看到将值更新为foo 确实调用了过滤器，但deferredValue 的值仍然是一个空字符串。您始终可以在控制器范围内设置 deferredValue 并将其传递给您的过滤器
@zeroflagL 你是最好的答案。请在下面输入，以便我接受。我尝试修改过滤器并完美运行。谢谢。
强烈建议不要通过 Angular 本身编写有状态的过滤器。你为什么不使用模型，它可以作为参数传递给过滤器。

标签： javascript angularjs promise angular-filters angular-http

【解决方案1】：

你应该使用 statefull 过滤器

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

【讨论】：

【解决方案2】：

使用模型，可以作为参数传递给过滤器。

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';
  });
}]);

标记：

{{test | myfilter : deferredObj.value}}

【讨论】：