AngularJS指令的$scope.var已更新，但没有添加任何类。为什么？如何解决？

Question

我不明白我的$scope.isYellow变量发生了什么。为什么它得到更新只是很好，但类yellow不添加到一个元素?

这是一个jsfiddle: http://jsfiddle.net/akctq645/

目标很简单:当你点击一个"颜色"span，它的背景必须变成黄色。我使用ng-class和自定义指令来实现它。我的自定义指令的范围有适当的变量isYellow:

<span id="spanElem" make-yellow-directive ng-class="{yellow: isYellow}">Color</span>

controller: function($scope, $element, $attrs, $transclude) {
    $scope.isYellow = 0;
    this.toggleIsYellow = function() {
        $scope.isYellow = ($scope.isYellow == 1) ? 0 : 1;
    }
},

但无论我怎么做，它都不起作用。由于某种原因，this.toggleIsYellow方法中的变量$scope.isYellow被更新了，但span没有变成黄色，yellow类没有被添加。事件，如果我在Chrome控制台调试器手动切换$scope.isYellow，类yellow不会出现在span。

为什么?发生了什么事?这是相同的范围，它的isYellow变量得到更新，但为什么类yellow不添加到span ?

Answer 1

Angular的双向绑定是由所谓的摘要循环提供支持的。简而言之，Angular保留了自己的事件队列，并使用它来确定何时需要遍历作用域树来检查更改。当你使用jQuery的'on()'函数时，你创建的事件不会经过Angular的摘要周期，这意味着它不会知道自己需要更新ui来匹配作用域的变化。一个快速的修复方法是这样做:

function onClickHandler(e) {
    console.log('== onClickHandler ==: ', e);
    
    scope.$apply(function () {
        ctrl.toggleIsYellow(e);
    });
};

"apply&quot美元;方法强制Angular启动一个摘要。不过，你应该直接使用"ng-click"在跨度上，你想要切换行为。使用"apply&quot美元;

Answer 2

你可以在DOM事件进程中修改isYellow的值，但是Angular的更新必须在Angular的digest阶段运行。

要使示例运行，需要将代码行包装在$作用域中。$apply在更新结束时手动运行$scope.$digest()的功能。

见http://jsfiddle.net/Ldbocp73/

this.toggleIsYellow = function() {
    $scope.$apply(function() {
        $scope.isYellow = ($scope.isYellow == 1) ? 0 : 1;
    });
}