MR.ABC MR.ABC - 6 months ago 144
Javascript Question

AngularJS Trigger ng-animate when binding value change

I have a directive where some content is bound via

ng-html-bind-unsafe
. 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

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: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html