AngularJS Digest Loop究竟是如何工作的？ [英] How exactly does the AngularJS Digest Loop work?
问题描述
我是AngularJS的新手，我正在研究它。我对与Angular提供的摘要循环相关的概念有些怀疑。
I am new to AngularJS and I am studying it on a tutorial. I have some doubt about the concept related to the Digest Loop provided by Angular.
我的应用程序由这两个文件组成：
My application is composed by these 2 files:
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);
}]);
据我所知，句柄变量通过以下方式声明为Angular范围：
From what I understand, the handle variable is declared into the Angular scope, by:
$scope.handle = '';
并且它会自动绑定到特定的视图对象，如在
and it is automatically bound to a specific object of view as declared in this section of the DOM of index.html:
<div>
<label>What is your twitter handle?</label>
<input type="text" ng-model="handle" />
</div>
因此，对此输入对象发生的任何更改都意味着更改 $ scope 中的句柄属性，反之亦然。
So any change that happen into this input object implies a change of the handle property in the $scope and vice-versa.
我的理解是使用Angular，我不必在我想要观察的对象上手动添加经典的vanilla JavaScript EventListener （通过 addEventListener（））但Angular实现了此功能我使用消化循环。
My understanding is that with Angular, I do not have to manually add a classic vanilla JavaScript EventListener (by the addEventListener() on the object that I want to observe) but Angular implements this feature for me using the Disgest Loop.
然后Angular（但我不太确定）维护观察者列表在 Angular Context 中。在此列表中，范围中的每个元素都有一个观察器对象，该对象已包含在页面中（输入，选择等）。
Then Angular (but I am not so sure about it) maintains a watcher list in the Angular Context. In this list there is a watcher object for each element in the scope that has been included in the page (input, select, etc).
所以观察者包含有关相关元素的旧值和新值的信息，如果是新值与旧值Angular在DOM中的相关字段中自动更新。
So a watcher contains the information about the old value and the new value of the related element and if the new value is different from the old value Angular automatically update in the related field in the DOM.
根据我的理解，摘要循环不断迭代此观察者列表检查特定观察者的旧值是否与新值不同（如果观察对象的值发生变化）。
From what I have understood the digest loop continuously iterates on this watcher list to check if the old value of a specific watcher is different from the new value (if the value of the observed object is changed).
那么什么这意味着什么？ Angular会持续运行一个循环（类似而），不断检查某个字段的值是否发生变化？如果它自动执行特定操作？
So what it means exactly? That Angular continuously runs a cycle (something like a while) that continuously check if the value of some field is change? And if it happen automatically perform a specific operation?
推荐答案
所有断言都是正确的，但摘要循环活动不是这样的计时器函数总是运行以查找更改，但是当您添加一个隐式观察程序（使用ng-model或ng-bind）并且某些事物附加到角度上下文（输入更改，点击事件ecc。）时，摘要循环开始并应用更改对所有活跃的观察者。是循环，因为它在前一次迭代标记某些更改时运行;当没有任何变化或它交互超过10次时（这意味着一些设计问题）它停止。
All your assertions are true, but the digest loop activity is not such a timer function that run always to find changes, but when you add an inplicit watcher (with ng-model or ng-bind) and somethings append on angular context (an input change, a click event ecc.) the digest loop start and apply changes to all active watcher. Is a loop because it run while the previous iteration mark some changes; it stop when there are no changes left or it interate more then 10 times (that mean some design problem).
这是因为有太多的观察者可能导致性能问题。
This is the reason because to have too many watchers could cause performance issues.
理解这一点的一个很好的例子是使用链接函数创建一个指令来改变某些模型属性。如果您没有在$ apply函数中附上该更改，或者您没有调用$ digest，则模型更改不会影响模型观察者。
A good example to understand that is to create a directive with the link function that change some model property. If you didn't enclose that change on a $apply function or you didn't call $digest the model change will not affect the model watchers.
这篇关于AngularJS Digest Loop究竟是如何工作的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
