为什么比需要的角度读$范围吗？ [英] Why does Angular read $scope more than needed?

问题描述

我注意到，角是低于保守，当谈到阅读$作用域属性。当应用程序/控制器首先实例，在通过$范围暴露模型中定义的每个绑定属性是读两次。当任何属性更改，所有绑定属性都看了一遍。

有人能解释为什么（或我错误地做一些事情）？

下面是一些code来说明。

我对象上定义两个属性，这样我就能的console.log 随时随地的财产被读取。

obj的对象

  VAR OBJ = [];Object.defineProperty（物镜，一个，{
    得到：函数（）{
        的console.log（得obj.a：+ this.aVal）;
        返回this.aVal;
    }，
    设置：功能（VAL）{
        this.aVal = VAL;
        的console.log（设置obj.a =+ this.aVal）;
    }
}）;Object.defineProperty（物镜，B，{
    得到：函数（）{
        的console.log（得obj.b：+ this.bVal）;
        返回this.bVal;
    }，
    设置：功能（VAL）{
        this.bVal = VAL;
        的console.log（设置obj.b =+ this.bVal）;
    }
}）;
 

的角应用程序：

  VAR应用= angular.module（应用程序，[]）
.controller（TestCtrl功能（$范围）{
    $ scope.foo = OBJ;
}）;
 

和HTML：

 ＆LT; D​​IV NG-应用=应用程序＆GT;
    ＆LT; D​​IV NG控制器=TestCtrl＆GT;
        ＆LT;输入类型=文本NG模型=foo.a＆GT;＆LT; /输入＆GT;
        ＆LT;输入类型=文本NG模型=foo.b＆GT;＆LT; /输入＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

结果

控制台日志如下：

时首先运行应用程序这两个属性被称为两次，每次：

 获得obj.a：未定义
得到obj.b：未定义
得到obj.a：未定义
得到obj.b：未定义
 

有关obj.a进入X时，这两个属性都看了一遍。

 设置obj.a = X
得到obj.a：X
得到obj.b：未定义
 

解决方案

角柄双向绑定。它做它的方式是通过脏检查。它检查任何观察的属性在摘要的顶部，然后在摘要（两次）的底部。然后，它比较值，看看是否有任何改变。这是它知道它是否需要重新绑定用户界面的方式。阅读参考这篇文章。

摘要周期运行随时有一个 $适用要求的范围。角常常这样（自己的指令在里面，例如 NG-点击）。

I noticed that Angular is less-than-conservative when it comes to reading $scope properties. When the app/controller first instantiate, each bound property defined in the model exposed via $scope is read twice. When any property changes, all the bound properties are read again.

Can someone explain why (or am I doing something incorrectly)?

Here's some code to illustrate.

I defined two properties on an object so that I could console.log anytime the property is read.

The obj Object

var obj = [];

Object.defineProperty(obj, "a", {
    get: function(){
        console.log("get obj.a: " + this.aVal);
        return this.aVal;
    },
    set: function(val){
        this.aVal = val;
        console.log("set obj.a = " + this.aVal);
    }
});

Object.defineProperty(obj, "b", {
    get: function(){
        console.log("get obj.b: " + this.bVal);
        return this.bVal;
    },
    set: function(val){
        this.bVal = val;
        console.log("set obj.b = " + this.bVal);
    }
});

The Angular App:

var app = angular.module("App", [])
.controller("TestCtrl", function($scope){
    $scope.foo = obj;
});

and HTML:

<div ng-app="App">
    <div ng-controller="TestCtrl">
        <input type="text" ng-model="foo.a"></input>
        <input type="text" ng-model="foo.b"></input>
    </div>
</div>

The result

The console log is as follows:

when first running the app both properties are called twice each:

get obj.a: undefined
get obj.b: undefined
get obj.a: undefined
get obj.b: undefined

when entering "x" for obj.a, both properties are read again

set obj.a = x
get obj.a: x
get obj.b: undefined

解决方案

Angular handles two-way binding. The way it does it is through dirty checking. It checks any watched property at the top of the digest and then at the bottom of the digest (twice). It then compares the values to see if anything changed. This is the way it knows whether it needs to rebind the UI. Read this article for reference.

The digest cycle runs anytime there is an $apply called on the scope. Angular does this often (inside its own directives, e.g. ng-click).

这篇关于为什么比需要的角度读$范围吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！