在另一個指令中使用ngClass指令會引發控制台錯誤

Question

我試圖在我的指令中使用ngClass，它正在工作，但我看到一個控制台錯誤：

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

這是我的指令的簡化版本，它重現了這個問題：

angular.module('myApp', [])
    .directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
            myNgClass: '='
        },
        template: '<div ng-class="myNgClass">Hello World</div>'
    }
});

這是我如何使用它：

<my-directive my-ng-class="{'green':true}"></my-directive>

這里是jsFiddle的鏈接。

Answer 1

因此，首先，此錯誤特定於您正在使用的Angular版本（v1.2.1） - 它已在v1.2.5（使用v1.2.5的工作演示）中修復。

其次，你真的不應該使用雙向綁定（ "=" ），因為你似乎不需要更改指令內的值。 使用"="不必要地創建2個觀察者。

你絕對可以做單向字符串綁定（ "@" ），如下所示：

scope: {
  myNgClass: '@'
},
template: '<div ng-class="{{myNgClass}}">Hello World</div>'

但這將是一個更有限的用途。 例如，您將無法將對象（ $scope.greenStyle = { green: true }; ）傳遞給您的指令：

<my-directive my-ng-class="greenStyle"></my-directive>

最好使用單向綁定表達式 - "&" 。 這樣可以保留一只手表並綁定到一個對象 - 而不是字符串。 scope.myNgClass成為一個返回綁定表達式值的函數：

scope: {
  myNgClass: '&'
},
template: '<div ng-class="myNgClass()">Hello World</div>'

演示

Answer 2

使用@而不是= 。

myNgClass: '@'

當你使用= angular時添加一個$ watch來改變'myNgClass'。 當添加$ watch時，angular會將$$ hashKey添加到對象，並“嘗試”將修改后的對象分配回其來源（以便源和目標具有相同的對象）。

問題是當$ digest比較它具有{'green':'true', $$hashKey: '123546246'}與評估的表達式{'green':'true'}比較失敗時所以$ watch listener運行（注意：那部分只是我的理論。我不知道100％它正在添加一個hashKey，但我知道它將對象視為不同的實例並且觸發了監聽器）。 由於my-ng-class將始終發送回該對象的新實例，因此它將始終不同並始終觸發監視偵聽器。

如果你想繼續使用=你可以（但沒有必要）。 你只需要在傳入它之前在其他地方定義你的初始對象。你可以使用ng-init來做到這一點，如下所示：

<my-directive ng-init="clazz={'green':'true'}" my-ng-class="clazz"></my-directive>