Question

我是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，我不必在我想要观察的对象上手动添加经典的vanilla JavaScript EventListener （通过 addEventListener（） ）但是Angular使用 Disgest Loop 为我实现了这个功能。

然后Angular（但我不太确定）在 Angular Context 中维护观察者列表。在此列表中，范围中的每个元素都有一个观察器对象，该对象已包含在页面中（输入，选择等）。

因此，观察者包含有关相关元素的旧值和新值的信息，如果新值与旧值Angular不同，则自动更新DOM中的相关字段。

根据我的理解，摘要循环连续迭代此观察者列表，以检查特定观察者的旧值是否与新值不同（如果观察对象的值发生变化））。

那究竟是什么意思？ Angular会持续运行一个循环（类似而），不断检查某个字段的值是否发生变化？如果它自动执行特定操作？

Answer 1

所有断言都是正确的，但摘要循环活动并不是一个总是运行以查找更改的计时器函数，但是当您添加一个隐式观察器（使用ng-model或ng-bind）并且某些东西附加在角度上下文中时（输入更改，点击事件ecc。）摘要循环开始并将更改应用于所有活动观察者。是循环，因为它在前一次迭代标记某些更改时运行;当没有任何变化或它交互超过10次时（这意味着一些设计问题），它停止。

这就是原因，因为有太多的观察者可能会导致性能问题。

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

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

1 个答案: