AngularJS ng-class 在某些极端情况下向类添加“-add”答案

【问题标题】：AngularJS ng-class is adding "-add" to class in some edge casesAngularJS ng-class 在某些极端情况下向类添加“-add”
【发布时间】：2015-12-11 23:37:46
【问题描述】：

我遇到了 ng-class 的问题，在一些奇怪的边缘情况下，它会将我想要添加到元素的类应用到元素中，但是将“-add”连接到类名。我认为这可能与这个类有关，它允许将动画作为过渡状态应用，并且应该立即应用没有“-add”的类，但由于某种原因它只是卡在“-add 类”上。

这是第 4 格带有 ng-class 的 html 代码：

<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>

基本上，这是针对仅显示在移动设备上的导航下拉菜单，并且用户所在的当前选项卡应该具有由 ng-class 应用的“context-active:”类。因此，当用户在选项卡之间单击或打开新选项卡时，ng-class 正在工作，但是当他们使用 md-icon 按钮关闭选项卡时，它会关闭该选项卡并将它们导航到它前面的右侧，这就是ng-class 失败了。函数 activeClass() 为上下文返回 true，它所做的只是检查上下文中的单个属性并返回 true 或 false，我只是将它变成了一个函数，以便我可以调试并查看返回。

我在其他任何地方都无法重现此问题。是否有任何我可能会丢失的角度或与 ng-class 相关的东西，或者有没有一种方法可以在不使用 ng-class 的情况下做到这一点？

【问题讨论】：

标签： angularjs ng-class

【解决方案1】：

所以经过一番搜索后，我发现很多人对 ng-ifs 或 ng-hide/show 和 ng-animate 将动画类留在元素上存在问题。但是，由于 ng-class，我无法找到任何遇到我的问题的人，所以我将在此处发布对我有帮助的答案和代码。

基本上，解决这个问题的最简单方法是将动画类留在元素上或放置在一个元素上，然后在甚至不使用动画时粘贴在它上面，是创建一个指令来禁用 ng-animate它所在的元素。

这是来自指令的打字稿版本的链接函数：

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

这是取自这个问题的第四个答案disable nganimate for some elements 的正常角度代码，第一个在我的情况下不起作用。

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

编辑：在较新版本的 Angular 中，$animate.enabled 具有上述顺序的参数，但在较旧版本的 Angular 中，参数会切换。因此，如果您的整个页面都禁用了动画，请尝试切换参数。

【讨论】：