AngularJS 摘要循环究竟是如何工作的？

Question

我是 AngularJS 的新手，我正在学习教程。我对 Angular.

提供的 Digest Loop 相关概念有些疑问

我的应用程序由这两个文件组成：

1) index.html:

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
        <title>Learn and Understand AngularJS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>

        <!-- load angular via CDN -->
        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-controller="mainController">

                <div>
                    <label>What is your twitter handle?</label>
                    <input type="text" ng-model="handle" />
                </div>

                <hr />

                <h1>twitter.com/{{ lowercasehandle() }}</h1>

            </div>

        </div>

    </body>
</html>

2) app.js:

var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$filter', '$timeout', function($scope, $filter, $timeout) {

    // Variable that is bound to the input into the view handled by the 'mainController' controller:
    $scope.handle = '';

    // This variable is a function putted into the $scope and contain the lowecase content of the handle variable:
    $scope.lowercasehandle = function() {
        return $filter('lowercase')($scope.handle);
    };

    // I explicitly declare a whatche on the handle property: when the value of this propertu change the function() is performed:
    $scope.$watch('handle', function(newValue, oldValue) {

        console.info('Changed!');
        console.log('Old:' + oldValue);
        console.log('New:' + newValue);

    });

    $timeout(function() {

        $scope.handle = 'newtwitterhandle';
        console.log('Scope changed!');

    }, 3000);

}]);

据我了解，handle 变量被声明到 Angular 范围内，方法是：

$scope.handle = '';

并且它自动绑定到特定的视图对象，如index.html的DOM的本节中声明的：

<div>
    <label>What is your twitter handle?</label>
    <input type="text" ng-model="handle" />
</div>

因此，此 input 对象发生的任何更改都意味着 $scope[=] 中 handle 属性的更改56=] 反之亦然。

我的理解是，使用 Angular，我不必手动添加经典香草 JavaScript EventListener（通过 addEventListener() 在我想观察的对象上）但是 Angular 使用 Disgest Loop.
为我实现了这个特性
然后Angular（但我不太确定）在Angular上下文[=中维护一个观察者列表 56=]。在此列表中，页面中已包含范围内的每个元素都有一个观察者对象（输入、select 等）。

因此观察者包含有关相关元素的旧值和新值的信息，如果新值不同从旧值 Angular 自动更新到 DOM.
中的相关字段
据我了解，摘要循环不断迭代此 观察者列表 以检查特定观察者的旧值是否与新值不同（如果值观察对象发生变化）。

那么这到底是什么意思呢？ Angular 连续运行一个循环（类似于 while），连续检查某个字段的值是否发生变化？如果它发生自动执行特定操作？

Answer 1

你所有的断言都是正确的，但是摘要循环 activity 不是这样一个定时器函数运行总是可以找到变化，但是当你添加一个隐含的观察者（使用 ng-model 或ng-bind) 和附加在 angular 上下文上的东西（输入更改，点击事件等）摘要循环开始并将更改应用于所有活动观察者。是一个循环，因为它运行 while previous iteration mark some changes;当没有剩余更改或交互超过 10 次（这意味着一些设计问题）时它会停止。

这是因为观察者过多可能会导致性能问题。

一个很好的理解示例是使用 link 函数创建指令来更改某些模型属性。如果您没有将更改包含在 $apply 函数中或者您没有调用 $digest，则模型更改将不会影响模型观察者。

AngularJS 摘要循环究竟是如何工作的？

How exactly does the AngularJS Digest Loop work?

javascript

javascript-framework

dom-events

angularjs