如何保持CSS類別不受Angular控制器的影響

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

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

<p ng-class="{{active}}">Class applied!</p><script>
    function MySimpleCtrl() {
        $scope.active = &#39;active&#39;;
        ...

所以在控制器中我們設定應該顯示的特定類別; 所以假設我們有一個類別「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: &#39;active&#39;, false: &#39;inactive&#39;}[isActive]">
    Class applied
!</p><script>
    function MySimpleCtrl() {
        $scope.isActive = true;

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

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

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

以上是如何保持CSS類別不受Angular控制器的影響的詳細內容。更多資訊請關注PHP中文網其他相關文章！