Question

我不明白我的$scope.isYellow变量发生了什么。为什么它更新得很好但是yellow没有添加到元素中？

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

目标很简单：当你点击＆＃34;颜色＆＃34; 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;
    }
},

但无论我做什么，它都无法奏效。出于某种原因，$scope.isYellow方法中的变量this.toggleIsYellow会更新，但span不会变为黄色，则不会添加yellow类。如果我在Chrome控制台调试器中手动切换$scope.isYellow，则yellow类不会出现在span上。

为什么呢？到底是怎么回事？它的范围是相同的，它的isYellow变量会更新，但为什么课程yellow没有添加到span？

Answer 1

Angular的双向绑定由所谓的摘要周期提供支持。简而言之，Angular保留自己的事件队列，并使用它来确定何时需要遍历范围树以检查更改。当你使用jQuery＆＃39; on（）＆＃39;功能，你创建一个没有经历Angular摘要周期的事件，这意味着它不知道它需要更新ui以匹配范围的变化。快速解决方法是：

function onClickHandler(e) {
    console.log('== onClickHandler ==: ', e);

    scope.$apply(function () {
        ctrl.toggleIsYellow(e);
    });
};

＆＃34; $ apply＆＃34;方法用于强制Angular启动摘要。虽然，你应该真的只使用＆＃34; ng-click＆＃34;在您想要切换行为的范围上。使用＆＃34; $ apply＆＃34;通常是Angular中的代码气味。

这是对你的小提琴的编辑，它更像一个角色：http://jsfiddle.net/jinfiesto/5qdsuy7o/

Answer 2

您更改了DOM事件过程中isYellow的值，但Angular更新必须在Angular digest阶段运行。

要使您的示例运行，您需要将代码行包装在$ scope。$ apply函数中，在更新过程结束时手动运行$scope.$digest()。

请参阅http://jsfiddle.net/Ldbocp73/

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

AngularJS指令的$ scope.var已更新，但未添加任何类。为什么？怎么修？

2 个答案: