AngularJS and scope.$apply

翻译自Jim Hoskins的教学博客

当你开始使用AngularJS开始写真正的项目的时候，你一定会碰到$scope.$apply()方法。表面上看，这像是一个帮助你进行数据更新的方法，那么，它为何存在，我们又该如何使用它呢。

JavaScript是基于顺序执行的

JavaScript代码按照代码片段的顺序来之行，每个代码块从运行到结束都不会被打断，这也是为什么会发生浏览器阻塞的情况，往往是有一部分在运行，而导致其他所有的代码段冻结。

每当有耗费时间较多的任务出现，例如等待一个click事件，等待Ajax请求的回应，我们都会设定一个回调函数，当click事件被触发或者计时器完成，就会创建一个新的JavaScript turn，并执行完回调函数。

例如:

var button = document.getElementById('clickMe');

function buttonClicked () {

alert('the button was clicked');

}

button.addEventListener('click', buttonClicked);

function timerComplete () {

alert('timer complete');

}

setTimeout(timerComplete, 2000);`

当JavaScript代码开始运行，先找到一个botton，并添加一个点击的监听事件，且设定一个timeout。浏览器会再这段代码执行完毕之后进行web的更新，并且接受用户的输入。

如果浏览器检测到一个新的点击事件发生，他就会开始一个turn，来执行buttonClicked函数。当函数执行结束，这个阶段也随之结束。

经过2000毫秒，浏览器会创建一个过程来执行timerComplete。在这两个过程之间，页面被重绘，输入被接收。

如何来更新绑定数据

Angular为我们提供了一些接口绑定JavaScript代码和数据，那么Angular又是如何知道数据改变，并且需要更新的呢。

这里有两种策略来解决这个问题。

第一种是使用特殊对象，通过方法来设定数据而不是属性。这种方法并不推荐，主要是由于其繁琐的操作。例如不能使用obj.key = 'value'，而是要使用obj.set('key', 'value')代替（一些框架如EmberJS和 KnockoutJS还在使用这个方法。

而Angular采取了另外的解决方案，即允许任何值作为绑定数据。在JavaScript运行末尾，检测是否有数据的更新，若有，这将这些变化反射到我们绑定的显示上。

$apply 和 $digest

进行数据变化检查的实际上是$digest函数,但是我们往往不是直接使用$digest，而是使用$apply，$apply接收表达式或者函数作为参数后调用$digest来更新绑定部门以及监控器。

那我们究竟要什么时候来调用$apply呢，实际上，Angular几乎在所有提供的代码中添加了$apply，如ng-click，初始controller，$http的回调操作，在这，你并不需要亲自调用 $apply，而且重复的调用会引起错误。

因此，当你运行了一个新阶段，并且这部分并不属于Angular库的情况下才需要使用$apply。这有一段关于setTimeout的代码，在经过了2000毫秒的延迟之后，代码进入执行了一个新的阶段，但是Angular并不知道数据有更新，因此更新并不会被显示。

function Ctrl($scope) {

$scope.message = "Waiting 2000ms for update";

setTimeout(function () {

$scope.message = "Timeout called!";

// AngularJS unaware of update to $scope

}, 2000);

}

为了方便大家的使用，Angular提供了$timeout来代替setTimeout,相当于在其中默认调用$apply。

如果在你的代码中使用了除$http之外的Ajax调用，除了ng-*之外的监听器，或者除了$timeout之外的计时器，都应该使用$scope.$apply来同步显示绑定。

$scope.$apply() vs $scope.$apply(fn)

最后讨论一下$scope.$apply()和$scope.$apply(fn)应该使用哪个的问题，相信大家看到过很多使用$scope.$apply()的例子，通过它确实可以达到预期的结果，但是也可能错失其他的机会。

如果你的代码没有作为一个参数传入$scope.$apply()，那么，当其发生异常或者执行错误时，错误将会抛出到Angular之外，这意味着你的异常处理程序将会忽略掉它。实际上，$scope.$apply()不单单是只运行你的代码，同时它还提供了try/catch,而$digest运行在一个finally语句中，这意味着，无论有错误与否，

你的程序都会正常执行，这是很优秀的一个特性。

当仅仅使用Angular所提供的对象，你不该过多的使用$apply()，而当你使用directive直接去操作DOM元素时，那就是必要条件了。

完