AngularJS，對變化進行動畫處理：未調用指令$ watch

Question

我正在創建一個實時的websocket應用程序，該應用程序需要在更改值時吸引用戶的注意力。

在同一頁面的多個位置使用以下偽指令：

<span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span>

和

<div animate-on-change animate-class="colorWarning" animate-watch="rq.answer"
                                 ng-switch="question.type"
                                 ng-repeat="rq in recentResponse.answers"
                                 ng-if="rq.question == question.id">

現在，rq.answer很少更改，但是每次實際值更改時都會更改。 IE：它正常工作。

不幸的是，第一個調用在第一次調用（頁面加載）后不起作用，但是{{totalAnswers}}顯示了外觀變化。 該模型肯定會更新，但不會調用$ watch。 為什么是這樣？

.directive('animateOnChange', function ($timeout) {
    return {
      scope: {
        animateClass: '@',
        animateTime: '@',
        animateWatch: '@',
        animateCollection: '@'
      },
      link: function (scope, element, attr) {
        function call() {
          element.addClass(scope.animateClass);
          $timeout(function () {
            element.removeClass(scope.animateClass);
          }, scope.animateTime || 1000); // Could be enhanced to take duration as a parameter
        }

        if (scope.animateWatch)
          scope.$watch(scope.animateWatch, function (nv, ov) {
            call();
          }, true);
        if (scope.animateCollection)
          scope.$watchCollection(scope.animateCollection, function (nv, ov) {
            call();
          });
      }
    };
  })
;

Answer 1

您需要將$watch上的第一個參數更改為返回變量的函數，而不是變量本身：

scope.$watch(function () {
               return scope.animateWatch; }, 
             function (nv, ov) {
               call(); }, 
             true);

在觀看部分的文檔中查看。