怎样维持CSS类不挨Angular控制器的影响

在Angular（以及个别状况下）中，我非常喜好将视图逻辑保存在我的控制器以外，并且我以为没有产生这种状况的地方是CSS类和ng-class的运用。 在Angular（以及个别状况下）中，我非常喜好将视图逻辑保存在我的控制器以外，并且我以为没有产生这种状况的地方是CSS类和ng-class的运用。

关于ng-class你可能不太熟知，它是一个特别的指令，允许绑定表达式并将它们作为元素的类放置。ng-class的一个非常常见的用法是这样的：

Class applied!
《script》
    function MySimpleCtrl() {
        $scope.active = 'active';
        ...

所以在控制器中我们设定应当显示的特定类; 所以假如我们有一个类“inactive.”——我们简略地将$scope.active 变量设定为“inactive”，我们最后在视图中设定了类。

但ng-class甚至比那更好用：

ng-class承受三种不一样类型的值：

1、字符串值（类的名称）

2、字符串数组（要利用的类）

3、要评估的对象+表达式

其当选项3的语法看起来像这样

ng-class="{object of key/value pairs}[expression to evaluate]"

根本上，ng-class盘算表达式（在方括号中），然后运用它作为对象的键；键相干的值是利用的类。

这允许我们将$scope.active值转换为真正的布尔值（这正是我们运用它的方式）——控制器中没有视图逻辑，控制器更容易测试而且可以重用。

这是一个简略的例子：

    Class applied
!
《script》
    function MySimpleCtrl() {
        $scope.isActive = true;

要是您正在运用某种前提表达式（即切换），那么您可以运用另一种非常类似的语法：

ng-class="{'selected': isSelected, 'blue': isBlue}"

此处，要是selected为真，则将利用选定的类，blue类也同样。Angular将利用尽可能是真实的，因而您可以将类设定为selected和blue。

以上就是怎样维持CSS类不挨Angular控制器的影响的细致内容，更多请关注 百分百源码网 其它相干文章！