什么时候在 AngularJS 中触发摘要

Question

全部：

我有一个关于angularjs数据摘要如何监控范围数据变化的问题，例如：

 <button ng-click="changename()">{{name}}</button>

而数据变化函数是这样的：

            $scope.name = "Change Name";
            $scope.changename = function(){
                $scope.name = "name1";
                $scope.name = "name2";
            }

            $scope.$watch("name", function(newname, oldname){
                if(newname!=oldname){
                    console.log("new: "+newname, "old: "+oldname);
                }
            });

这个changename函数连续两次改变scope.name，但是观察者只能捕捉到从“Change Name”到“name2”的变化（控制台只打印“new: name2 old:更改名称")

谁能证实我的猜测摘要循环仅在功能块完成执行后开始？

谢谢

Answer 1

我想更正 rbaghbanli 的误导性答案。

确实，因为 JavaScript 是单线程的，所以当你点击那个按钮时会发生什么：

The variable `$scope.name` is set to "name1";
The variable `$scope.name` is set to "name2";
> end of execution stack

Angular runs a $digest cycle
The $watchers are executed
since a watcher value has changed, angular runs another $digest cycle
The $watchers are executed
The watcher have the same value, end of $digest cycle
> end of execution stack

所以当你在同一个函数中时，基本上没有观察者也不会发生任何事情，直到这个函数的每一行结束。

Angular 在您的changename 调用之后运行摘要循环的原因是因为它在ng-click 指令中，并且与所有Angular 内置指令一样，代码实际上被包装在$scope.$apply 调用中。您可以将ng-click 阅读为以下代码（即使从技术上讲它并不完全如此）：

element.on('click', function() {
  $scope.changename();
  $rootScope.$digest();
});

注意：我想简化通用的想法，但从技术上讲，Angular 在您的代码之后立即执行其 $digest 循环（正如您在我的伪 ng-click 中看到的那样），在同一个执行堆栈中。这意味着任何setTimeout 或其他异步调用都将在摘要周期之后发生，并且在 DOM 更新为最新更改之后，这有时会很有用。

Answer 2

是和不是。 JavaScript 是在单线程上执行的，所以会有 2 次 $watch 函数调用，但只有在 $scope.changename() 完成之后，所以第 2 次调用才会有 newname == oldname == 'name2'。

Answer 3

一般来说，Angular 会在某个事件发生后触发一个摘要循环。在您的情况下，ngClick 指令在执行提供的表达式后触发摘要。许多其他用户触发的事件也是如此，例如mouseover, keydown, keypress.

因此，在changename() 中更改name 多少次都没关系；下一个摘要循环只会“看到”最后分配的值。