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

How exactly does the AngularJS Digest Loop work?

本文关键字：工作 何工作 循环 究竟 AngularJS      更新时间：2023-09-26

我是AngularJS的新手，正在教程中学习。我对Angular提供的摘要循环的相关概念有一些疑问。

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

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>

因此，该输入对象中发生的任何更改都意味着$scope中handle属性的更改，反之亦然。

我的理解是，使用Angular，我不必手动添加经典的JavaScriptEventListener（通过我想要观察的对象上的addEventListener（）），但Angular使用Disgest Loop为我实现了这一功能。

然后Angular（但我对此不太确定）在Angular Context中维护一个观察者列表。在这个列表中，页面中包含的作用域中的每个元素都有一个观察者对象（input、select等）。

因此，观察程序包含有关相关元素的旧值和新值

据我所知，摘要循环在观察者列表上不断迭代，以检查特定观察者的旧值是否与新值不同（如果观察对象的值发生了更改）。

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

您的所有断言都是真的，但摘要循环活动并不是一个总是运行以查找更改的计时器函数，而是当您添加一个不合法的观察程序（具有ng模型或ng绑定）和一些附加在角度上下文上的东西（一个输入更改，一个点击事件ecc.）时，摘要循环会启动并将更改应用于所有活动的观察程序。是一个循环，因为它在上一次迭代标记某些更改时运行；当没有任何变化时，它就会停止，或者它的迭代次数超过10次（这意味着一些设计问题）。

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

要理解这一点，一个很好的例子是创建一个带有链接函数的指令，该指令可以更改一些模型属性。如果您没有将该更改包含在$apply函数中，或者没有调用$digest，则模型更改不会影响模型观察者。

相关文章：