angularjsangularjs-directiveng-animateng-classisolate-scope

Angular ng-animate 1.3.* Causes to unexpected behavior to ng-class inside directive

I'm in the middle of the transition from version 1.2.* to 1.3.* , and I came across a very strange and critical bug.

In my application I have a very simple directive contain a template with ng-class (with condition to scope property) for some reason it's not working with 1.3.* version, and it's work fine with 1.2.* version.

Have a look on this Plunker to illustrates the problem.

This Plunker code is with angular 1.2.* version, and as you can see it's work fine.

Try to change the angular version (index.html)

<script src="https://code.angularjs.org/1.3.9/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.9/angular-animate.js"></script>
   <!--<script src="https://code.angularjs.org/1.2.28/angular.js"></script>
   <script src="https://code.angularjs.org/1.2.28/angular-animate.js"></script>-->

Refresh the page, and then you can see the bug:
Angular doesn't refresh the ng-class according to the 'active' property changing.

I tried to understand what can causes to this bug, and after a lot of tries I found that 'ngAnimate' module causes to this problem. try to delete the 'ngAnimate' dependency (script.js): 

  //var app = angular.module('app', ['ngAnimate']);
    var app = angular.module('app', []);

And then you can see that everything is fine, so 'ngAnimate' version 1.3.* causes to this problem.

So it's AngularJS bug, am I right?

If not, what I'm doing wrong?

Solution

  • Do you have any specific reason to use the replace option in the directive? If not, you can just remove it and it works fine. Link to working plunker with Angular 1.3.9:

    http://plnkr.co/edit/jLIS9uJ1PHC64q6nEmtB?p=preview

    V1.3.9 docs tell that replace is deprecated and very rarely needed for directives to work, and apparently in your case it also managed to cause some trouble.