MR.ABC MR.ABC - 1 year ago 243
Javascript Question

AngularJS Trigger ng-animate when binding value change

I have a directive where some content is bound via

. I like to have a transition when the content changes. I can use jquery to fade it out, change the content value and fade it back in.

Is there a more elegant way with AngularJS ?

Answer Source

In angular 1.2.0 you can use a directive that watches for content changes and adds then removes the classes. You can tie an animation to those class adds and removes that triggers the fading effect you are looking for.

module.directive('contentChange', function(){

 return {

  scope: {
   content: '='

  template: '<span ng-bind-html="myContent"></span>',

  link: function(scope, element, attrs){
   scope.$watch('content', function(){

    //add fader class to element

    scope.myContent = content;

    //remove fader class from element

Here's a popular article on 1.2 animations: