AngularJS ngClass表达式和数组组合

Question

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

<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

最好将ng-class赋值给scope中的一个变量。即 ng-class = customClasses

在 controller 中是这样的。这样做可以让您完全控制必须在模态上应用的 classes。

编辑： 在 plnkr

中查看此示例应用程序

$scope.customClasses = {
   'is-msg': $scope.message.type == 'msg',
   'height-limit': $scope.message.hasHeight,
   "h-md" : true, 
   "text-info": true
};

Answer 2

还有另一种语法看起来像这样

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

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

AngularJS ngClass表达式和数组组合

AngularJS ngClass expression and array combination

javascript

angularjs

ng-class