在鏈接內部使用手表會導致無限的摘要周期。

Question

我正在嘗試編寫將分數與顏色關聯的指令。

我已經嘗試過了，而Plunker在這里 。 指令本身在這里：

.directive('scorebox', function () {
    function link ($scope, $elem, $attr) {
        var one = 1;
        $scope.$watch('[score,ptsPossible]', function (newValue) {
            pctScore = newValue[0] / newValue[1]
            if (pctScore <= 0.4) {
                rating = 'low';
            } else if (pctScore <= 0.6) {
                rating = 'med';
            } else if (pctScore <= 0.8) {
                rating = 'high';
            } else if (pctScore == 1) {
                rating = 'perfect';
            }

            $elem.removeClass();
            $elem.addClass('scorebox');
            $elem.addClass(rating);
            $elem.text(newValue[0] + "/" + newValue[1]);
        });
    };

    return {
        restrict: 'E',
        scope: {
            score: "=",
            ptsPossible: "="
        },
        link:link 
    }
}) 

我有幾個問題。

1. 首先，對我來說很明顯，我不應該在link函數中執行$watch 。 我正在創建一個無限的摘要循環，這不好。 不過，我仍然不確定為什么。
2. 我沒有正確地操作DOM。 即使我在調用$elem.removeClass() ，它也無法正常工作-該元素保留了以前擁有的所有類。

什么是正確的方法？

Answer 1

只是使事情正常的建議：

1. 不需要同時$watch score和ptsPossible因為從相應的屬性值加載值后，后者永遠不會改變。 您還可以訪問$watch回調函數中的scope變量。
2. 這是不尋常的，因為我期望您的removeClass()能正常工作。 同時，您可以在這里嘗試removeAttr('class') 。

這是帶有建議更改的Plunker 。

Answer 2

您需要使用$watchCollection而不是$watch 。 您正在將數組傳遞給$watch ，這是$watchCollection期望的。

Answer 3

1. 正如@miqid所說，無需同時監視score和ptsPossible，因為您只想在得分變化時做出反應（至少在這種情況下會出現）。

2. 這里的問題是您正在使用jqLit​​e的removeClass函數而不是jQuery的 removeClass函數。 如果代碼中沒有在Angular之前包含jQuery，則Angular會改用jqLit​​e函數，這類似於較小，更簡單的jQuery版本。 它也略有不同。 jQuery的removeClass（） ，將刪除所有沒有傳遞參數的類。 jqLit​​e不會做相同的事情，只會刪除您作為參數傳遞的那些類。

您根本沒有包含jQuery，因此就是這種情況。 這是經過編輯的“ Plunker” 。 您可以檢查jQuery現在是否包含在頂部，並且一切正常。 而且$ watch更簡單。