Wie genau funktioniert der AngularJS Digest Loop?
Ich bin neu bei AngularJS und lerne es in einem Tutorial. Ich habe Zweifel an dem Konzept desDigest Loop bereitgestellt von Angular.
Meine Anwendung besteht aus diesen 2 Dateien:
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);
}]);
Von was ich verstehe, diehandleie Variable @ wird in den Gültigkeitsbereich Angular deklariert, indem:
$scope.handle = '';
und es wird automatisch an ein bestimmtes Ansichtsobjekt gebunden, wie in diesem Abschnitt des DOM von @ deklarierindex.html:
<div>
<label>What is your twitter handle?</label>
<input type="text" ng-model="handle" />
</div>
Also jede Änderung, die in diesem @ passierEingan Objekt impliziert eine Änderung deshandle Eigenschaft in der $ scope und umgekehrt
ein Verständnis ist, dass ich mit Angular kein klassisches Vanille-JavaScript manuell hinzufügen mus EventListener (bis zumaddEventListener () auf dem Objekt, das ich beobachten möchte), aber Angular implementiert diese Funktion für mich mit demDisgest Loop.
Then Angular (aber da bin ich mir nicht so sicher) pflegt einwatcher list in demAngular Context. In dieser Liste gibt es ein Überwachungsobjekt für jedes Element in dem Bereich, der auf der Seite enthalten ist (Eingabe, Auswahl usw.).
So enthält ein Beobachter die Informationen über dasold value und dieneuer Wer des zugehörigen Elements und wenn der neue Wert vom alten Wert abweicht, wird Angular automatisch im zugehörigen Feld im DOM aktualisiert.
Von dem, was ich verstanden habe, iteriert die Digest-Schleife kontinuierlich auf diesemwatcher list, um zu überprüfen, ob der alte Wert eines bestimmten Beobachters vom neuen Wert abweicht (wenn der Wert des beobachteten Objekts geändert wird).
So was bedeutet das genau? Dieser Winkel läuft kontinuierlich einen Zyklus (so etwas wie einwähren) die ständig prüfen, ob sich der Wert eines Feldes ändert? Und wenn es passiert, führen Sie automatisch eine bestimmte Operation durch?