Question

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

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="GreetingApp" ng-controller="GreetingCtrl">
    <p>{{ appName }}</p>
    <h1>{{ name | greeting }}</h1>
    <br />

    Greetword:
    <input ng-model="greetWord" />
    <button ng-click="GreetingService.setGreetWord(greetWord)">Use "{{ greetWord }}"</button>
    <br />
    <br />

    Name:
    <input ng-model="name" />

  </body>

</html>

内部script.js：

angular.module('GreetingApp', [])

  .controller('GreetingCtrl', ['$scope', 'GreetingService', '$rootScope', '$timeout',
    function($scope, GreetingService, $rootScope, $timeout) {

    $scope.appName = 'Greetings!';

    $scope.greetWord = 'Hello';

    $scope.name = 'World';

    $scope.GreetingService = GreetingService;
  }])

  .service('GreetingService', ['$rootScope', '$q', '$timeout',
    function($rootScope, $q, $timeout) {

    var service = {

      greetWord: 'Hello',

      setGreetWord: function(word) {
        var deferred = $q.defer();

          $rootScope.$applyAsync(angular.bind(this, function() {
            this.loadGreetWord(word);
            deferred.resolve();
            $rootScope.$new;
          }));

        return deferred.resolve();
      },

      loadGreetWord: function(word) {
        this.greetWord = word;
      },

      getGreetingFor: function(name) {
        return this.greetWord + ' ' + name;
      }

    };

    return service;
  }])

  .filter('greeting', ['GreetingService',
    function(GreetingService) {

    return function(name) {
      return GreetingService.getGreetingFor(name);
    };
  }]);

当GreetingService.greetWord的值发生变化时，我想在过滤器中使用它并更新视图中的文本。但是当调用$rootScope.$applyAsync时，我无法看到更改。我的问题在哪里？

Answer 1

将视图绑定到视图是一种不好的做法，您必须避免使用它。而是在控制器内部进行。

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>

AngularJS：过滤后的值已更改时刷新DOM

1 个答案: