Angular在$ digest循環之後如何更新視圖？

Question

它：

1）通過DOM（運行開始於ng-app），並且如果它看到DOM節點與一個指令，更新該DOM與相應模型值的節點。

或

2）在通過所述$$watchers列表運行時，如果它檢測到一個變化，它必須需要更新所述DOM節點的引用，因此它只是做的是（因此而不是通過整個運行DOM，使用這種方法，它將存儲並使用對$$watchers中節點的引用）。

Answer 1

這是更多的第二種方法。

Angular通過指令完成所有這些操作。漂亮的你在角使用太多一切都是指令：

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

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

所有那些小的指令得到它們所連接到的DOM元素，以及一個$scope對象的引用。 指令簡單地註冊一個回調，當某些事情發生變化時執行。

正如您已經注意到的，這些被稱爲的觀察者。

範圍是平行的，所以總是有一個相關的對象樹組成你的應用程序狀態。當一個$digest循環開始時，它遞歸地遍歷該樹尋找變化，並且發射回調（aka觀察者）。

回調可以選擇做任何它想要的。只是在大多數情況下，它正在更新DOM。

在一天結束時，真的沒有什麼神奇的發生。只是一個回調的結構，當某些事情發生變化時會被執行。

這是自定義指令的一個愚蠢的例子，當一些屬性發生變化時，它會註冊一個觀察器並更新DOM。

(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>