Javascript AngularJS：在筛选值更改时刷新DOM

我试图创建一个过滤器，当过滤值发生变化时，它可以刷新HTML中的角度表达式。所以我基本上在做：

---

当GreetingService.greetWord的值更改时，我希望在过滤器中使用它并更新视图中的文本。但是，当调用$rootScope.$applyAsync时，我看不到更改。我的问题在哪里？

将服务绑定到视图是一种不好的做法，您必须避免它。而是在控制器内部执行此操作

GreetingApp.controller("GreetingCtrl", function($scope, GreetingService) {
   $scope.greetWord = GreetingService.greetWord;
   $scope.setGreetWord = function(greetWord) {
      if(greetWord) {
         GreetingService.setGreetWord(greetWord);
      }
   }
});

在你看来：

由于您想使用greetWord对其进行过滤，您可以将其设置为过滤器。它将负责过滤：

  <li ng-repeat="item in names | filter:greetWord">
        <greeting name="item.name"></greeting>
  </li>

---

您好，感谢您提出将服务绑定到范围的建议！但是，我想做的是在调用GreetingService.setGreetWord时更新{{name | greeting}}。可能吗？请检查：请删除那些$rootScope.evalAsync等。这不是必需的。抱歉，它没有解决问题。我还意识到，在你的JSBin中，代码没有以任何方式修改？哦，对不起，希望我提供了以前版本的URL。将在某个时间共享正确的URL。。您是否检查了jsbin演示？

GreetingApp.controller("GreetingCtrl", function($scope, GreetingService) {
   $scope.greetWord = GreetingService.greetWord;
   $scope.setGreetWord = function(greetWord) {
      if(greetWord) {
         GreetingService.setGreetWord(greetWord);
      }
   }
});

  <li ng-repeat="item in names | filter:greetWord">
        <greeting name="item.name"></greeting>
  </li>