ng-switch-when 和 ng-class 兼容性答案

【问题标题】：ng-switch-when and ng-class compatibilityng-switch-when 和 ng-class 兼容性
【发布时间】：2015-07-21 15:52:43
【问题描述】：

我想知道当 ng-switch-when 和 ng-class 在同一个元素（如本示例中）上使用时是否没有兼容性问题。

我正在尝试动态更改这四个元素的类，但由于某些原因，这不适用于所有元素，仅适用于当前显示的元素。

有人知道这里发生了什么吗？

<div>
    <div ng-switch="sw" ng-init="sw=1">
        <div ng-switch-when="1" ng-class="oneClassOrAnother()"></div>
        <div ng-switch-when="2" ng-class="oneClassOrAnother()"></div>
        <div ng-switch-when="3" ng-class="oneClassOrAnother()"></div>
        <div ng-switch-when="4" ng-class="oneClassOrAnother()"></div>
    </div>
    <div>
        <button ng-click="goTo(1)">1</button>
        <button ng-click="goTo(2)">2</button>
        <button ng-click="goTo(3)">3</button>
        <button ng-click="goTo(4)">4</button>
    </div>
</div>

在 div 之间切换。

$scope.goTo = function(x) {
    $scope.sw = x;
}

返回一类或另一类。

$scope.oneClassOrAnother= function() {
    if (...) return "class1";
    else return "class2";
}

非常感谢。

【问题讨论】：

欢迎来到 Stack Overflow。这是一个非常好的第一个问题！ :)

标签： angularjs angularjs-ng-class angularjs-ng-switch

【解决方案1】：

您似乎没有正确使用 ng-class 语法。试试这样的：

<div ng-class="{class1: oneClassOrAnother()}" ng-switch-when="1">1</div>

其中 oneClassOrAnother() 返回真或假，“class1”是类的名称。

以下是一起使用 ng-class 和 ng-switch-when 的工作示例：http://plnkr.co/edit/n86SKEktRcPnBy05o8eZ?p=preview

Angular ngClass 文档：https://docs.angularjs.org/api/ng/directive/ngClass

【讨论】：

【解决方案2】：

我认为您的代码一切正常，看看这个 plunk，我复制了它并运行它。对比一下你的代码，可能你忘记了控制器？

http://plnkr.co/edit/Lz7L3S?p=preview

我猜唯一的区别是我从控制器而不是视图发起sw。

<div ng-switch on="sw">

【讨论】：

好的，可以了。我的问题应该来自我的其余代码（这只是一个示例，以便更好地理解）。但实际上，当我调试时，我尝试将 console.log() 添加到 oneClassOrAnother()。我想试试它是否真的是从每个 ng-class 启动的，令人惊讶的是，它似乎记录了奇怪的东西，是被点击的日志的两倍。在 plunker 上检查一下，更清楚：link 它不应该在每次点击时都记录下来吗？ 我是一我是二我是三我是四这可能是一个 DOM 问题，不是吗？