AngularJS，对变化进行动画处理：未调用指令$ watch

Question

I'm creating a live websocket application which requires grabbing the users attention upon change of a value.

The following directive is used in multiple places on the same page:

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

and

<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">

Now, rq.answer rarely changes, but changes every time the actual value changes. IE: it works correctly.

Unfortunately the first one does not work after the first call (On page load) but the {{totalAnswers}} shows the visual change. The model definitely updates but the $watch is not called on it. Why is this?

.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

You need to change the first argument on the $watch , to be a function returning your variable, instead of the variable itself:

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

Take a look here at the docs at the watch section.