AngularJS ng-class is adding "-add" to class in some edge cases

Question

I'm running into an issue with ng-class where in some weird edge cases it will apply the class I want to add to the element, but with with "-add" concatenated to the class-name. I think it might have something to do with this class allowing for animations to be applied as a transition state and the class without "-add" should be applied immediately after but it's just getting stuck on the "-add class for some reason.

This is the html code with the ng-class on the 4th div:

<div layout="column" hide-gt-sm show-sm class="desktop-dropdown">
    <div flex class="context-container ham-btn" ng-click="displayDropdown = !displayDropdown">
        <md-icon class="meevo-dropdown " md-svg-icon="assets/images/icons/meevo-dropdown.svg" ng-click="menu.closeMenu()" style="width: 50px;"></md-icon>
    </div>
    <div layout="column" class="desk-drop-container">
        <div class="drop-item" ng-class="{'context-active': activeClass(context)}" ng-click="context.navigate()" ng-show="displayDropdown" layout="row" ng-repeat="context in contexts">
            <a flex class="context-title">{{context.title}}</a>
            <div ng-show="{{!context.isHomeContext}}" class="pull-right meevo-context-close" ng-click="context.close()">
                <md-icon class="close-icon" md-svg-icon="assets/images/icons/meevo-circle-close.svg"></md-icon>
            </div>
        </div>
    </div>

Basically this is for a navigation dropdown that only shows up on mobile devices and the current tab that the user is on should have that "context-active:" class applied to it by the ng-class. So when a user clicks between tabs or opens new ones the ng-class is working but when they close a tab using the md-icon button it closes that tab and navigates them to the one right in front of it, and this is where the ng-class is failing. The function activeClass() is returning true for the context, all it does is check a single property on the context and returns true or false, I just made it into a function so I could debug and see the return.

I have been having trouble recreating this issue anywhere else. Is there anything that angular does that I might be missing or something with ng-class or is there a way I can do this without utilizing ng-class?

score 0 · Accepted Answer · edited May 23 '17 at 11:44

So after some searching I found a lot of people having issues with ng-ifs or ng-hide/show and ng-animate leaving animation classes on elements. I wasn't able to find anyone with my problem where it was occurring due to an ng-class however so I'll post the answer and code here that helped me.

Basically the simplest way of getting around this issue with animation classes being left on an element or being placed on one and then sticking on it when animations aren't even being used is to create a directive that disables ng-animate for whatever element it is placed on.

This is the link function from the typescript version of the directive:

        link = (scope: any, element: JQuery, attrs: angular.IAttributes) => {
           var  animate = this.animate;
           animate.enabled(element, false);
        }

And here is the normal angular code taken from the 4th answer to this question, disable nganimate for some elements , the first one did not work in my case.

myApp.directive("disableAnimate", function ($animate) {
    return function (scope, element) {
        $animate.enabled(element, false);
    };
});

Edit: In newer versions of angular, $animate.enabled has parameters in the order shown above, but in older versions of angular the parameters are switched. So if animations are being disabled for your whole page, try switching the parameters.

AngularJS ng-class is adding "-add" to class in some edge cases

1 Answers1