AngularJS $ scope树

示例

当我们需要将单个html元素绑定到单个变量时，上述示例就足够了。

实际上-我们需要将许多元素绑定到许多变量：

<span ng-repeat="number in [1,2,3,4,5]">{{number}}</span>

这ng-repeat会将5个元素绑定到5个称为的变量上number，每个变量具有不同的值！

angular实现此行为的方式是为每个需要单独变量的元素使用单独的上下文。该上下文称为范围。

每个范围都包含属性，这些属性是绑定到DOM的变量，并且$digest和$watch函数被实现为范围的方法。

DOM是一棵树，需要在树的不同级别中使用变量：

<div>
    <input ng-model="person.name" />
    <span ng-repeat="number in [1,2,3,4,5]">{{number}} {{person.name}}</span>
</div>

但是正如我们所看到的，context(or scope)内部变量ng-repeat与上面的上下文不同。为了解决这个问题-angular将范围实现为一棵树。

每个作用域都有一个子级数组，调用其$digest方法将运行其所有子级$digest方法。

这种方式-更改输入后-$digest被称为div的作用域，然后$digest为它的5个子级运行div-这将更新其内容。

范围的简单实现如下所示：

function $scope(){
    this.$children = [];
    this.$watches = [];
}

$scope.prototype.$digest = function(){
    this.$watches.forEach(function($w){
        var val = $w.val();
        if($w.prevVal !== val){
            $w.callback(val, $w.prevVal);
          $w.prevVal = val;
        }
    });
    this.$children.forEach(function(c){
        c.$digest();
    });
}

$scope.prototype.$watch = function(val, callback){
    this.$watches.push({val:val, callback:callback, prevVal: val() })
}

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