I'm currently developing a real-time websocket application that needs to grab the user's attention whenever there is a change in a value.
The code snippet below is being used in multiple instances on the same webpage:
<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">
Typically, 'rq.answer' doesn't change often, but it does update whenever the actual value changes. This behavior works as expected.
However, the first instance doesn't work correctly after the initial call (on page load), even though the visual change for {{totalAnswers}} is displayed. The model is updating, but the $watch function isn't triggered. Any insights into this issue?
.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); // Can be improved by taking 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();
});
}
};
})
;