Question

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

这是第4个div上带有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的情况下做到这一点？

Answer 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);
        }

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

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

编辑：在较新版本的角度中，$ animate.enabled按上述顺序显示参数，但在较旧版本的角度中，参数会被切换。因此，如果要为整个页面禁用动画，请尝试切换参数。

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

1 个答案: