我该如何将这个作用域变量绑定到ng-class属性？

Question

这似乎应该相当简单，但是我已经没有任何选择了。

在我的视图中，我有：

<div>{{selectedTheme.theme}}</div>
<ion-nav-view ng-class="selectedTheme.theme" name="menuContent"></ion-nav-view>

第一个 div 输出了期望的类。然而，我无法将该类插入到 ion-nav-view 元素中！

生成的标记如下：

<div class="ng-binding">Dark</div>
<ion-nav-view ng-class="selectedTheme.theme" name="menuContent" class="view-container" nav-view-transition="ios" nav-view-direction="none" nav-swipe="">></ion-nav-view>

任何输入都是非常重要的！

附加说明：此外，只需使用“class”简单设置即可正常工作。

- Louis93

---

我建议你在这里使用指令并使用element.addClass()。你也应该看一下这个问题。 - Dan Mindru

@JamesP，那不正确。ng-class接受一个表达式，如果该表达式求值为空格分隔的类名字符串或数组，则直接使用这些值。只有当表达式是对象时，如果属性具有真值，则将其用作类。 - New Dev

如果你只是想要类的名称，请添加{{}}，像这样： ng-class="{{selectedTheme.theme}}" - Neta Meta

Answer 1

在Angular中，ng-class使用表达式或普通字符串。你可以做如下操作：

1. 根据Angular变量添加/删除类
2. 根据计算表达式添加/删除类
3. 基于动态数据绑定单个或多个类

你可以将一个Angular变量添加到ng-class中，这个变量就是该元素要使用的类。因此，在您的情况下，如果selectedTheme.theme产生了您希望使用的确切class名称，则应该可以正常工作。

<ion-nav-view ng-class="varHoldingClassName" name="menuContent"></ion-nav-view>

所以这里是一个完整的实例：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Angular!';
    $scope.selectedTheme = {
         'coalTheme': 'textColor'
    };
}

.textColor{
    color: red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <div ng-class="selectedTheme.coalTheme">Hello, {{name}}!</div>
</div>
</div>

- Dayan