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

Question

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?

Vesicatory

Thanks for the tip. I was experiencing an issue with ng-class since upgrading where the class either didn't update, or it kept both the old and new value on the scope variable being updated. I had ng-animate module referenced but wasn't actually using it. Since removing that reference, I havent seen the issue so far. – Dormie

did you check this? docs.angularjs.org/guide/migration#animation-nganimate- – Albion

Answer 1

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.

Bolshevist

Answer 2

As per the doc replace will be deprecated in version 2. As you are using Angular 1.3.9, that should be fine.

To fix this issue either you can remove replace from directive or still if you want to use replace then wrap directive template content which has ng-transclude in a div like below

<div><div ng-click='click()' ng-class='{\"{{defaultColorClass}}\" : !active, \"{{activeColorClass}}\": active, \"mousePointer\" : !active}' class='k-content-button-inner-style {{effectClass}} {{externalClass}}' ng-transclude></div></div>

For more info refer - https://docs.angularjs.org/api/ng/directive/ngTransclude , Explain replace=true in Angular Directives (Deprecated).

Denunciatory

Answer 3

@bensiu: Removing the unused* variable {{effectClass}} in the template will make it work for 1.4.4 in the plunker example linked to the question.

Modified plunk here

*Edit: Probably I should say "using a variable not in scope" rather than "unused variable".

Specific