Class setting broken when combining ng-class and multiple interpolations in class attribute

[chezih]

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?

[Narretz]

Hi, to clarify, the problem is that when you mouseover an item, a specific class does not get applied? Or is the class applied, but the styling is not? It would really help if you could reduce the example even more, i.e. remove all parts of the code and styling that have nothing to do with the problem.

[chezih]

Hi,
Here is an updated Plunker, I tried to focus on the problem as much as I could.
The bug not about the mouseover (in the new example I deleted it).
The problem is the class inside the ng-class (in the directive) doesn't apply according to 'active' changed (true or false). Only when I click on the directive (and execute 'nav.activeIndex = $index') only then the 'active' is updated and effect on ng-class.
The bug: 'active' should effect on ng-class when the control is evaluate at the first time (when the control is initialized) like in version 1.2.*, and not only when I click on it.

Thanks!!

[Narretz]

Did you save the plunker? It looks like it's the same one.

[Narretz]

Okay, I see the mouseover is gone. However, there's still too much going on. Sometimes the button "containers" change color erratically, turning to white and black, then back to purple. Happens in both 1.2.x and 1.3.x.
Then, once with 1.3.x the button containers were all white.

Is there actually a way to reproduce this in a plunkr? What exactly should I do and see (which colors when if you want)?

[chezih]

I'm using chrome browser, and it's work fine in 1.2.x version!.
I don't understand what you don't understand?
It's very simple:
In version 1.2.x the 'active' changes effect on the ng-class (inside the template) in the beggining!!! (when the control is initialized - when the ng-repeat apply on it).
because this line: ng-init="nav={};nav.activeIndex = 0" only the first directive get the active=true and become a purple and the rest active=false and the got the black color. When you click on the directive it's become active=true because this line click="nav.activeIndex = $index", and everithing works fine!!.
In 1.3.x: when the control is initialized and ng-repeate apply on the directive the active for all directive is not true and not false (this is my problem, I don't know why) and therefore you see only white (because the template is without any background color), only when I click on it the active is updated and make the color changes.
Ostensibly this bug don't have any relation to ng-animate, but if I delete the ngAnimate dependency everything work fine!

[gkalpak]

@chezih: Your plunkr is sooo far away from an SSCCE. There is so much unrelated stuff in there, that makes it difficult and time-consuming to isolate the problem.
Providing a minimal, runnable example that reproduces the issue, means that people (such as @Narretz, me and probably a couple of others) won't waste time on trying to figure out what the problem is, which again means they will have more time to fix problems.

That said, the problem seems to be caused by the use of interpolated keys in the ngClass object.
Replacing the interpolated strings with hard-coded values solves the issue (Demo plunkr).

I am not sure if interpolated keys were intentionally supported in older versions (I had no idea they even worked), or supported "by chance", in which case we wouldn't fix this.
(If that's the case, then you could rely on other ways to achieve this functionality, e.g. using a template function instead of a hard-coded template, using a function on scope to generate the classes, etc.)

[gkalpak]

Although I don't believe it is the same issue, point (D) on #9109 (comment) might be relevant.

[Narretz]

@gkalpak That looks interesting! I have reduced the problem to this form:
http://plnkr.co/edit/BBJ4QLSsbxZSPEPMEXJ4?p=preview

Once you have ng-Class and two interpolations in the class attr, the ng-class expression is not applied. In this form, there's no effect in removing ngAnimate, though.

Looks like a nice debugging experience for a cold and dark winter night.

[Narretz]

I also tracked the breakage down to 1.3.0-beta.19; unfortunately there are a ton of changes that could be the cause.

[chezih]

@gkalpak - Thank for your comments!! - I'll try to do it better for next time...
Do you have some example for using template function (or link you can refer me to it)? It's can help me a lot (I tried to find some example in the web without success).
@Narretz - Nice bug! but I don't think it's my bug (as you said "there's no effect in removing ngAnimate", in my case you can see that ngAnimate caused the problem), maybe you should open a new bug