Angular如何在$摘要周期后更新视图？

Question

Does it:

1) Run through the DOM (starting at ng-app ) and if it sees a DOM node with a directive, update that DOM node with the corresponding model value.

or

2) In running through the $$watchers list, if it detects a change, it has a reference to the DOM node it needs to update, so it just does that (so rather than running through the whole DOM, using this approach, it'd store and use a reference to a node in $$watchers ).

Answer 1

It's more of the second approach.

Angular does all it's heavy lifting via directives. Pretty much everything you use in Angular is a directive:

<div ng-app>
<div ng-controller>
<button ng-click>

<!-- input is actually a directive -->
<input ng-model="foo" />

All those little directives get a reference to the DOM element they are attached to, as well as a $scope object. The directives simply register a callback to be executed when something changes.

As you have already noted, these are called watchers.

Scope is heirarchical, so there is always a tree of related objects that make up your application state. When a $digest loop kicks off, it recursively walks that tree looking for changes, and firing off the callbacks (aka watchers) .

The callback can then choose to do whatever the heck it wants. It's just that in most cases, it's updating the DOM.

At the end of the day there really is nothing magical about how it happens. Just a structure of callbacks, that get executed when something changes.

Here is a silly example of a custom directive that registers a watcher and updates the DOM whenever some property changes.

 (function(){ function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } function updateValue(){ return { restrict:'A', link: function(scope, elem, attrs){ elem.on('click', function(){ //You would never actually do this, but // it's a demo scope[attrs.updateValue] = "rgb(" + getRandomInt(0, 255) + "," + getRandomInt(0, 255) + "," + getRandomInt(0, 255) + ")"; //kick off a digest loop manually // this is similar to what a lot of angular // directives do. scope.$digest(); }); } }; } function sillyDomChangeOn(){ return { restrict:'A', link: function(scope, elem, attrs){ scope.$watch(attrs.sillyDomChangeOn, function(newVal, oldVal){ elem.css('color', newVal); }); } }; } angular.module('my-app', []) .directive('updateValue', updateValue) .directive('sillyDomChangeOn', sillyDomChangeOn); }()); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> <div ng-app="my-app" class="container"> <button type="button" class="btn btn-primary" update-value="randomVal">Update Value</button> <h3>Value: <code>{{randomVal}}</code></h3> <div class="well" silly-dom-change-on="randomVal"> <h3>This is just a random DIV</h3> <div> </div>