javascript - AngularJS multiple class="{{class1}} {{class2}}" 自动按单词排序？

Question

我有 2 个 Div

<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}} 更改为“第二列宽”，而不是提供的“两列宽”。 就我而言，这是有问题的，因为由于 css 逻辑，需要这种类的顺序。

有什么办法可以防止这种情况发生吗？

score 1 · Accepted Answer

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

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

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

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

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

1 回答 1