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

I have a div that I want to give a dynamic class with AngularJS.

DIV的是withing的NG-repeat语句其中lang。preFIX是先连接再SV

The div is withing an ng-repeat statement where lang.prefix is first en then sv

使用以下code ++工程，并设置类I位恩比我旗-SV，但它是正确的？

Using the following code works and sets the class to i-flag-en than i-flag-sv, but is it correct?

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

我知道

存在一个纳克级的指令，它可以用来动态地设置的类的与AngularJS的元素

I know there exist a ng-class directive which can be used to dynamically set the class of an element with AngularJS.

我觉得我在书上读到过，即正常类指令不应该被用来与角，因​​为一路AngularJS动态设置类属性操纵DOM。

I think I read somewhere in a book, that the normal class directive not should be used to set the class property dynamically with AngularJS because of the way Angular manipulates the dom.

但是，下面的code不工作：

However, the following code does not work:

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

和我比较要设置这样的类，而不是创建另一个范围的变量。

and I rather want to set the class in this way instead of creating another scope variable.

它是不好的做法是使用class属性与AngularJS动态设置类？它的工作原理所有的时间，即使这将是不好的做法？

推荐答案

您刚才提到可能已经讲过关于使用纳克级和类 {{}} 插在一起，其中插值更新删除纳克级类，这个问题已经解决了，< A HREF =htt​​ps://github.com/angular/angular.js/issues/1016> 参考 。因此，使用类属性的内插值是完全的罚款，并不会破坏好的做法，因为两者都有自己的怪癖。

The book you have mentioned may have talked about the problems of using ng-class and class {{}} interpolations together wherein updates in the interpolation removes the ng-class classes, this problem has already been resolved, reference. Thus, using interpolation within class attributes is totally fine, and does not break good practice because both has its own quirks.

不过您纳克级的使用不正确，你有你的范围字符串变量来串联字符串值：

Your usage of ng-class however is incorrect, you have to concatenate the literal string value with your scope string variable:

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

但我认为这是非常preferable使用你的第一个例子，而不是：

but I think it is much preferable to use your first example instead:

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