AngularJS：過濾值更改后刷新DOM

Question

我正在嘗試創建一個過濾器，該過濾器可以在過濾值更改時刷新HTML內的角度表達式。 所以我基本上是做這個：

<!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 個解決方案

解決方案1
0 2015-03-30 09:52:12

AngularJS：過濾值更改后刷新DOM

問題描述

1 個解決方案

解決方案1 0 2015-03-30 09:52:12

解決方案1
0 2015-03-30 09:52:12