如何使用 ng-class 绑定一次而不绑定一次

Question

我怎样才能成功做到这一点？

ng-class="{'a':x, 'b':::y}"

请注意我是如何尝试仅与 "y" 绑定一次而不是 "x"

我也试过使用多个 ng-class 指令，像这样：

<div ng-class="{'a':x}" ng-class="::{'b':y}"></div>

但也不行。

Answer 1

问题是您只能在表达式的开头指定一次性绑定语法 ::。这里你的表达式是一个对象文字，在第二个键值之前使用 :: 会导致语法无效。您必须将它们分开，并可能在 class 表达式中放置一个部分（使用 2 个 ng-class 指令没有意义）。

示例：

ng-class="{'a':x}" class="someclass {{::{true:'b'}[y]}}"

Documentation

An expression that starts with :: is considered a one-time expression. ....

.a {
  color: green;
}
.b {
  color: blue;
}
.a.b {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<div ng-app>

  <div ng-class="{'a':x}" class="{{::{true:'b'}[y]}}">Test</div>
  X->
  <input type="checkbox" ng-model="x">Y->
  <input type="checkbox" ng-model="y">

</div>

注意：一次性绑定将保持监视直到它获得绑定属性的非未定义值。如果属性值在视图呈现时可用（即非异步），您可以只执行

<div ng-class="{'a':x}" class="{{::y ? 'b': ''}}">Test</div>

还有。

如何使用 ng-class 绑定一次而不绑定一次

How to bind both once and not once using ng-class

angularjs

ng-class