保持CSS類不受Angular控制器影響的方法

小編給大家分享一下保持CSS類不受Angular控制器影響的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

                                                           在Angular（以及一般情況下）中，我非常喜歡將視圖邏輯保留在我的控制器之外，而且我認為沒有發生這種情況的地方是CSS類和ng-class的使用。

對于ng-class你可能不太熟悉，它是一個特殊的指令，允許綁定表達式并將它們作為元素的類放置。ng-class的一個非常常見的用途是這樣的：

<p ng-class="{{active}}">Class applied!</p><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值轉換為真正的布爾值（這正是我們使用它的方式）——控制器中沒有視圖邏輯，控制器更容易測試并且可以重用。

這是一個簡單的例子：

<p ng-class="{true: 'active', false: 'inactive'}[isActive]">
    Class applied
!</p><script>
    function MySimpleCtrl() {
        $scope.isActive = true;

如果您正在使用某種條件表達式（即切換），那么您可以使用另一種非常相似的語法：

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

此處，如果selected為真，則將應用選定的類，blue類也一樣。Angular將應用盡可能是真實的，因此您可以將類設置為selected和blue。

以上是保持CSS類不受Angular控制器影響的方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！