AngularJS multiple class =“{{class1}} {{class2}}”按字词自动排序？

Question

我有2个Divs

<div ng-controller="controller1">
  <div ng-controller="controller2" class="{{changesindividually}}">
</div>
</div>

在controller1内部有

$scope.changesindividually = 'one column wide'

在controller2内部有

$scope.changesindividually = 'two column wide'

问题： 但是，可以通过这种方式更改父类： 做完之后：

$scope.changesindividually = 'two column wide'

从子控制器中， {{changesindividually}}更改为 '列宽2'而不是提供的'两列宽'。 在我的情况下，这是有问题的，因为由于css逻辑，这个类的顺序是必需的。

有没有办法阻止这种情况？

Answer 1

如果你看JavaScript API与Element上与类相关的属性进行交互，你会注意到属性（classList）不是字符串，而是字符串的集合。将其作为字符串处理可能会引入各种错误，这些错误取决于每个环境的具体实现（例如，Chrome可能会以与IE不同的方式执行操作）。

CSS本身并不关心类的顺序，因此我将假设您遇到的问题在于您操作元素上的类的方式。考虑使用不依赖于顺序的classList API和一个更完整的版本来实现您的目标。

您还应该考虑ng-class在元素上设置动态类，并避免脆弱的字符串操作。

<div ng-controller="controller2" ng-class="clsArray">

$scope.clsArray = ['one', 'column', 'wide'];