Javascript 类动态CSS

有以下代码：

HTML:

---

它的代码看起来不错，但有一个问题：页面加载后，我在“ng class”属性中看到“new order”类或“completed order”类，而不是在“class”中。错在哪里？提前感谢

您可以使用该结构

ng-class="{'new-order' : o.orderStatus.title == 'New', 'completed-order' : o.orderStatus.title == 'Completed'}"

---

在本例中，您使用了ng类作为属性 若您检查或查看源代码，那个么它将作为ng类属性的值列出 如果在“class”属性中需要计算出的类值，则使用以下语法

如果使用此语法，则类属性将具有类名以及用于计算此类的表达式，请尝试以下操作：

$scope.getOrderClass = (o) ->
  title = o.orderStatus.title
  {
    'new-order': title == 'New'
    'completed-order': title == 'Completed'
  }

---

你可以这样写一个指令

app.directive('myClass', [function(){
  return {
    scope: {
      class: '=myClass'
    },
    restrict: 'A',
    link: function(scope, elem, attrs, controller) {
      elem.addClass(scope.class);
    }
  };
}]);

鉴于：

<div my-class="getOrderClass(o)">I have the getOrderClass(o) class</div>

我有getOrderClass（o）类

我建议您以某种方式缓存getOrderClass（o）的结果，因为当您绑定函数调用时，它将在每个摘要循环中被调用。从长远来看，这可能会导致性能问题，通常不是一种好的做法，尤其是当函数处于ng重复状态时

可能是这样的

我有getOrderClass（o）类

---

Edit：注意，当指令初始化时，该指令只添加一次类，因此它不会像正常的双向绑定那样工作。如果您愿意，您还必须为scope.class添加一个监视程序，并再次调用elem.addClass

这是一个非常难看的代码。我可以在将来添加更多的状态：）抱歉，兄弟，感谢您的尝试错误在于ng类基于一个表达式动态地添加和删除类，该表达式为true或false。在您的例子中，您并没有告诉ng类添加该类，而是简单地向它传递一个静态值。尝试将其添加到class属性或传回表达式，如{'new-order'：true}。

app.directive('myClass', [function(){
  return {
    scope: {
      class: '=myClass'
    },
    restrict: 'A',
    link: function(scope, elem, attrs, controller) {
      elem.addClass(scope.class);
    }
  };
}]);

<div my-class="getOrderClass(o)">I have the getOrderClass(o) class</div>