AngularJS $ digest和$ watch

2023-09-14 03:35:04 378

例子

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

在用户交互之后（绑定DOM=>variable），将调用$digest

$watch设置在变量更改后调用的回调（绑定变量=>DOM）

注意：这是一个示例，不是实际的角度代码

我们需要两个功能：

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;    
//这通常是通过ng-model指令完成的
input1.addEventListener('keyup',function(e){
    realVar=e.target.value; 
    $digest()
}, true);

//通常使用{{expressions}}或ng-bind指令完成此操作
$watch(function(){return realVar},function(val){
    span1.innerHTML = val;
});

偏离路线时，实际的实现会更复杂，并且支持参数，例如绑定到哪个元素以及使用哪个变量

可以在这里找到一个正在运行的示例：https://jsfiddle.net/azofxd4j/

AngularJS $ digest和$ watch

例子

热门推荐

随机推荐