使用带有angular vs ng-class的类,同时使用混合表达式

use*_*230 21 javascript css angularjs

我有一个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>
Run Code Online (Sandbox Code Playgroud)

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

我想我在书中的某处读过,因为Angular操纵dom的方式,不应该使用普通的类指令用AngularJS动态设置类属性.

但是,以下代码不起作用:

<div class="float-left flag" ng-class="i-flag-{{lang.prefix}}"></div>
Run Code Online (Sandbox Code Playgroud)

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

使用AngularJS的class属性来动态设置类是不好的做法?它是否一直有效,即使这是不好的做法?

rye*_*lar 25

你提到的那本书可能已经讨论了使用ng-class和类{{}}插值的问题,其中插值中的更新删除了ng-class类,这个问题已经解决,参考.因此,在类属性中使用插值是完全正确的,并且不会破坏良好的实践,因为它们都有自己的怪癖.

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

<div class="float-left flag" ng-class="'i-flag-' + lang.prefix"></div>
Run Code Online (Sandbox Code Playgroud)

但我认为最好使用你的第一个例子:

<div class="float-left flag i-flag-{{lang.prefix}}"></div>
Run Code Online (Sandbox Code Playgroud)