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); 

采取在表款一看here at the docs。