剛用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