AngularJS ng-class 在某些边缘情况下向 class 添加“-add”

Question

我运行遇到了 ng-class 的问题，在一些奇怪的边缘情况下，它会应用我想添加到元素的 class，但是随着 with “-add”连接到 class-名称。我认为这可能与此有关 class 允许将动画应用为过渡状态，而没有“-add”的 class 应该在之后立即应用，但它只是卡在了“ -出于某种原因添加class。

这是html4号ng-class代码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>

基本上这是一个只显示在移动设备上的导航下拉菜单，用户当前所在的选项卡应该由 ng-class。因此，当用户在选项卡之间单击或打开新选项卡时，ng-class 正在工作，但是当他们使用 md-icon 按钮关闭选项卡时，它会关闭该选项卡并将它们导航到它前面的选项卡，并且这是 ng-class 失败的地方。 activeClass() 函数在上下文中 return 为真，它所做的只是检查上下文中的单个属性和 return 是真还是假，我只是把它变成了一个函数这样我就可以调试并查看 return.

我在其他地方重现这个问题时遇到了问题。 angular 是否有任何我可能遗漏的东西或 ng-class 的东西，或者有什么方法可以在不使用 ng-class 的情况下做到这一点？

Answer 1

因此，经过一番搜索后，我发现很多人对 ng-ifs 或 ng-hide/show 和 ng-animate 在元素上留下动画 classes 有疑问。由于 ng-class，我找不到任何人遇到我的问题，所以我会 post 在这里提供对我有帮助的答案和代码。

基本上解决动画问题的最简单方法 classes 被留在一个元素上或被放置在一个元素上然后在甚至不使用动画时坚持它是创建一个指令这将禁用 ng-animate 放置在其上的任何元素。

这是指令的 typescript 版本中的 link 函数：

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

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

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

编辑： 在新版本的 angular 中，$animate.enabled 的参数顺序如上所示，但在旧版本的 angular 参数被切换。因此，如果整个页面都禁用了动画，请尝试切换参数。

AngularJS ng-class 在某些边缘情况下向 class 添加“-add”

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

angularjs

ng-class