在使用混合表达式的同时使用带角度与 ng-class 的类

Posted 2023-03-06

【中文标题】在使用混合表达式的同时使用带角度与 ng-class 的类

【英文标题】：Using class with angular vs ng-class while using a mixed expression

【发布时间】：2014-09-25 04:41:33

【问题描述】：

我有一个 div，我想用 AngularJS 给一个动态类。

div 带有一个 ng-repeat 语句，其中 lang.prefix 首先是 en 然后是 sv

使用以下代码可以将类设置为 i-flag-en 而不是 i-flag-sv，但是否正确？

<div class="float-left flag i-flag-lang.prefix"></div>

我知道有一个ng-class 指令可以用来动态设置AngularJS 元素的类。

我想我在一本书的某处读到，由于 Angular 操作 dom 的方式，不应该使用普通的类指令来动态设置类属性。

但是，下面的代码不起作用：

<div class="float-left flag" ng-class="i-flag-lang.prefix"></div>

我宁愿以这种方式设置类，而不是创建另一个范围变量。

在 AngularJS 中使用 class 属性来动态设置类是不好的做法吗？即使这是不好的做法，它是否始终有效？

【问题讨论】：

好吧，这是我的经验，我不太了解角度 DOM 操作的内部工作原理。我不确定使用class= 是否被认为是不好的做法，我经常使用它并且没有发现它会给我带来任何问题（到目前为止）。只要您想有条件地设置一个类，或者当您希望该类发生变化时，请使用ng-class，只要您想动态评估这些类并且不要期望导致该类发生变化的表达式，请使用class=""。例如从函数返回一个类字符串：class=generateClassBasedOnProductType().

【参考方案1】：

您提到的书可能已经谈到了同时使用ng-class 和类 插值的问题，其中插值中的更新删除了ng-class 类，这个问题已经解决了，reference。因此，在类属性中使用插值是完全可以的，并且不会破坏良好的实践，因为两者都有自己的怪癖。

但是，您对 ng-class 的使用不正确，您必须将文字字符串值与您的范围字符串变量连接起来：

<div class="float-left flag" ng-class="'i-flag-' + lang.prefix"></div>

但我认为最好使用您的第一个示例：

<div class="float-left flag i-flag-lang.prefix"></div>