消化和观看

实现双向数据绑定，以实现前一个示例的结果，可以使用两个核心功能来完成：

• **** 用户交互后调用 $ 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/