javascript - 在链接内使用监视会导致无限的摘要循环。

Question

我正在尝试编写一个将分数与颜色关联起来的指令。

我已经尝试过了，Plunker 是 here 。该指令本身在这里:

.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. 正如@miqid所说，不需要$watch同时得分和ptsPossible，因为你只想在得分变化时使用react(至少在你呈现的这种情况下)。

2. 这里的问题是您使用的是jqLit​​e的removeClass函数而不是jQuery的。如果代码中 Angular 之前没有包含 jQuery，Angular 将改为使用 jqLit​​e 函数，这就像 jQuery 的更小、更简单的版本。它也略有不同。 jQuery的removeClass()，将删除所有不传递参数的类。 jqLit​​e 不会做同样的事情，它只会删除您作为参数传递的那些类。

您根本没有包含 jQuery，所以这就是发生的情况。这是编辑后的Plunker 。您可以检查 jQuery 现在已包含在顶部，并且一切都按预期工作。而且 $watch 也简单得多。