消化和觀看

實現雙向資料繫結，以實現前一個示例的結果，可以使用兩個核心功能來完成：

• **** 使用者互動後呼叫 $ digest （繫結 DOM =>變數）
• $ watch 設定在變數更改後呼叫的回撥（繫結變數=> DOM）

注意：這是一個示例，而不是實際的角度程式碼

<input id="input"/>
<span id="span"></span>

我們需要的兩個功能：

var $watches = [];
function $digest(){
    $watches.forEach(function($w){
        var val = $w.val();
        if($w.prevVal !== val){
            $w.callback(val, $w.prevVal);
            $w.prevVal = val;
        }
    })
}
function $watch(val, callback){
    $watches.push({val:val, callback:callback, prevVal: val() })
}

現在我們現在可以使用這些函式將變數連線到 DOM（angular 帶有內建指令，它將為你執行此操作）：

var realVar;    
//this is usually done by ng-model directive
input1.addEventListener('keyup',function(e){
    realVar=e.target.value; 
    $digest()
}, true);

//this is usually done with {{expressions}} or ng-bind directive
$watch(function(){return realVar},function(val){
    span1.innerHTML = val;
});

當然，真正的實現更復雜，並且支援引數，例如要繫結到哪個元素以及要使用的變數

可以在這裡找到一個執行示例： https ： //jsfiddle.net/azofxd4j/