我正在尝试编写一个将分数与颜色关联起来的指令。
我已经尝试过了,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
}
})
我有几个问题。
- 首先,对我来说很明显,我不应该在
link
函数内执行$watch
。我正在创建一个无限的摘要循环,这不好。但我仍然不确定为什么。 - 我没有正确操作 DOM。即使我调用
$elem.removeClass()
,它也不起作用 - 该元素保留了它之前拥有的任何类。
执行此操作的正确方法是什么?
最佳答案
正如@miqid所说,不需要$watch同时得分和ptsPossible,因为你只想在得分变化时使用react(至少在你呈现的这种情况下)。
这里的问题是您使用的是jqLite的removeClass函数而不是jQuery的。如果代码中 Angular 之前没有包含 jQuery,Angular 将改为使用 jqLite 函数,这就像 jQuery 的更小、更简单的版本。它也略有不同。 jQuery的removeClass(),将删除所有不传递参数的类。 jqLite 不会做同样的事情,它只会删除您作为参数传递的那些类。
您根本没有包含 jQuery,所以这就是发生的情况。这是编辑后的Plunker 。您可以检查 jQuery 现在已包含在顶部,并且一切都按预期工作。而且 $watch 也简单得多。
关于javascript - 在链接内使用监视会导致无限的摘要循环。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23208330/