I would like to have a a directive that notifies the user that data has changed, (for example by changing the bg color, shaking, sliding etc). A simple example would be something like this:
html:
<change watch="heartbeat">{{heartbeat}}</change>
directive:
angular.module('module').directive('change', function($timeout) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch(attrs.watch, function(value) {
element.addClass("changed");
$timeout(function() {
element.removeClass("changed");
}, 600);
});
}
}
});
How can I change the above directive so that it uses the ngAnimate functionality? I've been looking at the $animator service, but I can't work out how to fit it into the above model.
I believe this is currently not possible.
The ngAnimate directive only supports 5 predefined types of animation-triggering events at this moment (v1.1.4):
Each of the above is coupled with specific DOM manipulating operation, and what you are looking to achieve doesn't fit into any of these 5 categories, so perhaps not until custom animation events are being supported.
More explanations can be found here: http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery