AngularJS, Animate при изменении: директива $watch not call

Question

Я создаю живое веб-сокет-приложение, которое требует привлечения внимания пользователей при изменении значения.

Следующая директива используется в нескольких местах на одной странице:

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

Посмотрите здесь на документы в разделе часов.