0

I have a situation I can't figure out. ng-class is applying both of these classes, even though the expressions specify inverse logic. Here's the code that expresses how I want the classes to work: either isThinking or notThinking, but never both:

<div class="myWidget" ng-class="{
            isThinking:   vm.isThinking(),
            notThinking: !vm.isThinking()
          }"
</div>

The problem is that Angular applies both classes. I can't understand why.

I have investigated:

  • $digest cycle just needs to be triggered? No, causing a digest has no effect
  • Does isThinking always return true or false, never undefined? confirmed.
  • Does changing the name of one of the classes from notThinking to isReady solve it? (testing for perhaps a too-fuzzy regex match) No, the classes still are both active at the same time.
  • Does removing the second notThinking expression altogether cause the isThinking class to be properly added and removed? Yes, yes it does. Why is that, I have no idea.

Angular version is 1.4.6.

Can anyone think of a reason why both classes would be active, when the 2 expressions are clearly inverse?

SimplGy
  • 20,079
  • 15
  • 107
  • 144
  • 2
    Do you use ngAnimate? Does the bug happen without ngAnimate? Not really a solution but might help finding the cause of the problem. – JB Nizet Oct 24 '15 at 16:17
  • The function just inspects the existence of a private property. It almost couldn't be any simpler. ngAnimate I should look at... – SimplGy Oct 24 '15 at 17:20

1 Answers1

2

The problem was ngAnimate. I haven't found a root-cause, but it's enough for me to know that disabling animate solves the problem. This element wasn't explicitly animated, but ngAnimate impacts everything unless you disable it. I presume it's a framework issue with timing the DOM manipulation.

Fix:

link: function (scope, el, attrs) {
  $animate.enabled(el, false)
}
Community
  • 1
  • 1
SimplGy
  • 20,079
  • 15
  • 107
  • 144