Question

我目前在ng-class中有以下表达式，在AngularUI Bootstrap模式的视图中：

<div class="modal-body mdl-body"
     ng-class="{ 'is-msg': vm.message.type == 'msg',
                 'height-limit': vm.message.hasHeight }">

但我也希望传递一系列自定义类，如下所示：

ng-class="vm.message.classes"

这是在控制器中调用模态的地方：

modalService.open({
  type: "okay",
  title: "Terms & Conditions",
  content: $scope.APISettingData.signup_term_and_condition,
  classes: ["h-md", "text-info"],
  isHtml: true,
  hasHeight: true
});

这两种方式都没有相互作用，但是当我尝试将它们组合起来时，它们并没有起作用。

有可能这样做吗？请告诉我一些想法和解决方案。

Answer 1

还有另一种语法如下

<div ng-class="[custom1, custom2, {'text-danger': isBadJuJu()}]">Some Text</div>

custom1和custom2是控制器范围内的变量，{}是一组表达式，就像您在第一个示例中使用的语法一样

Answer 2

最好将ng-class分配给scope中的变量。即ng-class = customClasses

和controller这样的事情。这样做可以让您完全控制必须在模态上应用的类。

修改在plnkr

中查看此示例应用程序
$scope.customClasses = { 'is-msg': $scope.message.type == 'msg', 'height-limit': $scope.message.hasHeight, "h-md" : true, "text-info": true };

AngularJS ngClass表达式和数组组合

2 个答案: