关于angularjs中,数据模型被改变,页面不刷新的解决办法
刚用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);
});
}
});
很多人都用过这种方式来取值或更新数据,发现页面并没有随着更新而改变,需要手动刷新.
这是由于angularjs的watch不能监听到JS对$scope.data的更改.更改一下写法,就可以实现了
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，并执行完回调函数。
例如:
|
1
2
3
4
5
6
7
8
9
10
|
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并不知道数据有更新，因此更新并不会被显示。
|
1
2
3
4
5
6
7
8
|
function Ctrl($scope) { $scope.message = "等2秒后进行更新"; 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
