刚用angularjs时,确实被它的双向数据绑定震住了,但同时没有完合使用angularjs的方法,从而出现数据模型被改变,但页面不能随之更改,需要$scope.$apply()强制更新数据模型.

实际上出现这种情况,就是因为在angularjs中使用了JS方法产生数据源,看下面代码:

var myApp = angular.module("myApp",[]);
myApp.controller("mainController", function ($scope) {
$.get("/articlelist",{},function(data){
$scope.data=data;
});
$scope.updatedate = function(id,age){
$.get("/update",{id:id,age:age},function(data){
item.age=age;//这里你会发现值变了,但页面没刷新
$scope.$apply();//需要手动刷新
console.log(item);
});
}
});

var myApp = angular.module("myApp",[]);
myApp.controller("mainController", function ($scope,$http) {
$http.get("/articlelist").success(function(data){
$scope.data=data;
});
$scope.updatedate = function(id,age){
$http.get("/update?id="+id+"&age="+age).success(function(data){
item.age=age;//页面随着改变刷新
});
}
});

开始用angular做项目的时候,一定碰到过$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 采用任何数据可以用来绑定,并在JavaScript的末位运行并进行,并检查数据更新。

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

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

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

setTimeout( function () {
$scope.message = "时间到" ;
// AngularJS unaware of update to $scope
}, 2000);

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

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

angular js的双向数据绑定,在开发中起到的作用灰常大,但是,并不是所有时候都能起作用。

找了下资料发现,双向数据绑定其实也就是当模型发生了变化的时候,重绘了DOM,使你看到数据被更新了,引发模型变化的情况有:

1,dom事件;

2,xhr响应触发回调;

3,浏览器的地址变化;

4,计时器触发回调;

以上的某一个情况发生,都会触发模型监控机制,同时调用了$apply方法,重绘了dom;通常情况下,我们使用的一些指令或服务,如$http,$timeout,$location等都会调用$apply方法,

从而使用dom被重绘,数据得到更新,实现了双向数据绑定。

而在有些情况下,比如回调里,

回调函数里执行的方法被不会触发$apply方法。假如当你点击打了比较input select radio等等,触发了模型监控,值也随之更新了。

此时需要手动调$scope方法,使dom重绘。

function b(){

//方法1

$scope.b='b';

$scope.$apply();

//方法2

/**$scope.$apply(function(){

$scope.b='b';

})**/

https://www.cnblogs.com/leepyng/p/5781157.html

https://www.cnblogs.com/fangshidaima/p/6048071.html

http://blog.csdn.net/baby97/article/details/50329689