今天,我們要聊得是Angularjs中的小明星$apply
。當我們數據更新了,但是view層卻沒反應時,總能聽到有人說,用apply吧,然后,懵懂無知的我們,在賦值代碼后面加了$scope.$apply()
,然后就驚喜的發現。噢,真的更新了。
然而,有些時候,編譯器會無情的給你返回
Error: $digest already in progress
那么,導致這些現象的原因時什么的呢?$apply
究竟干了啥?聽我慢慢道來。
一.$apply的作用
$apply()函數可以從Angular框架的外部讓表達式在Angular上下文內部執行。
上面是AngularJs權威教程中的一句話。什么意思呢?
首先,你要清楚,在原生js或者第三方框架下,修改model,是有可能不會觸發視圖更新的,比如setTimeout、jquery插件。為什么?因為他們脫離了Angularjs的上下文,Angularjs并不能監聽到數據的改變。看例子。
1.setTimeout
html:
<p>{{name}}</p>
js:
$scope.name="張三";
setTimeout(function(){
$scope.name = '李四';
//$scope.$apply()
},500)
首先,name等于張三,500ms后,我把他賦值為李四,但是,頁面上并沒有改變,依然是張三。
而,我們把$scope.$apply()
放開,就正常了,張三成功變為李四。
2.第三方插件
html:
<p>Date: <input type="text" id="datepicker"></p>
<p>
<header>所選日期</header>
{{selectedDate}}
</p>
js:
$scope.selectedDate = '';
$( function() {
$( "#datepicker" ).datepicker({
onClose: function( selectedDate ) {
$scope.selectedDate = selectedDate;
// $scope.$apply();
}
});
} );
這是jquery的datepicker插件,當我們選定日期后,下面的日期應該隨之顯現,而現在卻沒有。這種情況就必須依靠$apply()
,才能更新視圖。
以上兩種情況,都因為不處于Angularjs上下文中,導致監聽不到數據的變化。而$apply
究竟干了什么,才導致數據更新正常了呢?
其實$apply相當于一個觸發器,它的作用就是觸發digest循環,從而更新視圖。
在digest是Angularjs的核心,是它實現了神奇的數據綁定。凡是觸發事件,必會觸發digest循環,比如,我們數值的ng事件,click啊,change,實際上都是觸發了digest循環。
所以,我們所做的事,其實就是手動觸發了digest循環。關于digest循環,屬于題外話,這里不做過多介紹,想深入了解的同學,可以看看書籍,或者百度。
二.更好地運用digest循環
在Angularjs中,除了$apply
可以觸發digest循環外,還有其他的方法,也可以觸發此循環。而且$apply
往往時最壞的選擇。下面推薦一些更好的選擇。
1.$digest
$scope.$digest()
的速度要比$apply
要快,因為它只更新當前作用域和子作用域的值,對于父作用域時不管的。而$apply
還要評估父作用域,這就大大消耗了性能。
2.$timeout
用$timeout
去代替你的setTimeout,$timeout
作為Angularjs的自帶服務,當然時更契合Angularjs環境啦。它會隱性觸發digest循環,而且它會延遲執行,會在上一個digest循環完成后的下一刻,觸發digest循環,這樣就不會出現上文所說的
$digest already in progress
我們把setTime的代碼放到$timeout
中
$timeout(function(){
$scope.name = '李四';
},500)
這就能正常工作了,看,沒有討厭的apply了!
3.$evalAsync
最推薦的應該時這個方法了。如果當前正好有一個digest循環在執行,那么它就會把導致digest循環的操作,放到當前digest循環中去執行。而$timeout
是要等到當前digest循環執行完,再執行一次digest循環才可以。所以evalAsync執行更快,性能更好。我們可以像$timeout
那樣去調用它,即
$scope.$evalAsync(
function( $scope ) {
console.log( "$evalAsync" );
}
);
以上,就是今天要說的全部內容。Angularjs中還藏著許多奧秘,和更好的使用方法,希望大家可以深入地研究,分享出更好的文章。
下面是可執行的代碼,大家可以探究探究
https://codepen.io/hanwolfxue/pen/yEZbYQ