angular的$watch,$digest和$apply

第一部分：$watch

$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下：

watchExpression：监听的对象，它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用)
objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

可参考：

http://yuankeqiang.lofter.com/post/8de51_1454f93

http://www.angularjs.cn/A0a6

官网：http://docs.angularjs.cn/api/ng/type/$rootScope.Scope

第二部分：$watch,$digest和$apply

最近项目上使用了比较多的angular JS，一直都对它感觉比较陌生，总觉得有点反直觉，这段时间，准备下定决心弄明白，这个框架到底是怎么一回事，以及它的工作原理，生命周期……一点一点的啃完它吧。首先，让我们先来看看

$watch(watchExpression, listener, objectEquality)

Param	Type	Details
watchExpression	function() string	Expression that is evaluated on each $digest cycle. A change in the return value triggers a call to the listener. string: Evaluated as expression function(scope): called with current scope as a parameter.
listener (optional)	function() string	Callback called whenever the return value of the watchExpressionchanges. string: Evaluated as expression function(newValue, oldValue, scope): called with current and previous values as parameters.
objectEquality (optional)	boolean	Compare object for equality rather than for reference.

从表格中可以看到，watchExpression和listener可以是一个string，也可以是一个function（scope）。该表达式在每次调用了$digest方法之后都会重新算值，如果返回值发生了改变，listener就会执行。在判断newValue和oldValue是否相等时，会递归的调用angular.equals方法。在保存值以备后用的时候调用的是angular.copy方法。listener在执行的时候，可能会修改数据从而触发其他的listener或者自己直到没有检测到改变为止。Rerun Iteration的上限是10次，这样能够保证不会出现死循环的情况。
$watch的基本结构如下：

//$scope.$watch(<function/expression>, <handler>);
$scope.$watch('foo', function(newVal, oldVal) {
    console.log(newVal, oldVal);
});
//or
$scope.$watch(function() {
    return $scope.foo;
}, function(newVal, oldVal) {
    console.log(newVal, oldVal);
});

$digest()

该方法会触发当前scope以及child scope中的所有watchers，因为watcher的listener可能会改变model，所以$digest方法会一直触发watchers直到不再有listener被触发。当然这也有可能会导致死循环，不过angular也帮我们设置了上限10！否则会抛出“Maximum iteration limit exceeded.”。
通常，我们不在controller或者directive中直接调用

$scope.$digest();

$apply(exp)

Param

Type

Details

exp
(optional)

string

function()

An angular expression to be executed.

string: execute using the rules as defined in expression.
function(scope): execute the function with current scope parameter.

个人理解，

function $apply(expr) {
    try {
        return$eval(expr);
    } catch(e) {
        $exceptionHandler(e);
    } finally {
        $root.$digest();
    }
}

$apply方法使得我们可以在angular里面执行angular框架之外的表达式，比如说：浏览器DOM事件、setTimeout、XHR或其他第三方的库。由于我们要在angular框架内调用，我们必须得准备相应的scope。调用方式如下：

$scope.$apply('foo = "test"');
//or
$scope.$apply(function(scope) {
    scope.foo = 'test';
});
//or
$scope.$apply(function(){
    $scope.foo = 'test';
});

directive给
directive给DOM中的一些元素注册event handler，它们会取得DOM中元素的值，然后更新到
当你通过框架更新了

至于angular js为什么要这么做，请看我上一篇博客angular js之scope.$apply方法。

$watch

当
尽量不要再controller中使用$watch方法，它会增加测试的复杂度，而且也不必要。可以使用scope上的方法去更新被改变的值。

在directive中使用
在service中使用
尽量不要再controller中使用

===============================================================================

关于angular.equals方法

该方法支持value types，regular expressions、arrays、objects。官方文档写的很清楚：
Two objects or values are considered equivalent if at least one of the following is true:

Both objects or values pass === comparison.
Both objects or values are of the same type and all of their properties are equal by comparing them with angular.equals.
Both values are NaN. (In JavaScript, NaN == NaN => false. But we consider two NaN as equal)
Both values represent the same regular expression (In JavasScript, /abc/ == /abc/ => false. But we consider two regular expressions as equal when their textual representation matches).

During a property comparison, properties of function type and properties with names that begin with $ are ignored.
Scope and DOM Window objects are being compared only by identify (===).

来源：http://www.cnblogs.com/penghongwei/p/3400535.html

秒客网

angular的$watch,$digest和$apply

相关文章