Как именно работает AngularJS Digest Loop?
Я новичок в 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 переменная объявляется в угловой области:
$scope.handle = '';
и он автоматически привязан к конкретному объекту зрения, как объявлено в этом разделе DOMindex.html:
<div>
<label>What is your twitter handle?</label>
<input type="text" ng-model="handle" />
</div>
Так что любые изменения, которые происходят в этомвход объект подразумевает изменениеhandle недвижимость в$ сфера и наоборот.
Насколько я понимаю, с Angular мне не нужно вручную добавлять классический ванильный JavaScriptEventListener (посредствомaddEventListener () на объекте, который я хочу наблюдать), но Angular реализует эту функцию для меня, используяDisgest Loop.
Тогда Angular (но я не уверен в этом) поддерживаетсписок наблюдателей вУгловой контекст, В этом списке есть объект-наблюдатель для каждого элемента в области, который был включен в страницу (ввод, выбор и т. Д.).
Таким образом, наблюдатель содержит информацию остарое значение иновое значение связанного элемента, и если новое значение отличается от старого значения, Angular автоматически обновляется в связанном поле в DOM.
Из того, что я понял, цикл дайджеста постоянно повторяется на этомсписок наблюдателей проверить, отличается ли старое значение конкретного наблюдателя от нового значения (если значение наблюдаемого объекта изменилось).
Так что это значит именно? Этот Angular постоянно запускает цикл (что-то вродев то время как) что постоянно проверяет, изменяется ли значение какого-либо поля? А если это произойдет, автоматически выполнить определенную операцию?