資訊專欄INFORMATION COLUMN
摘要：但是如果更改一個(gè)不在執(zhí)行上下文中的數(shù)據(jù)模型就需要人為的調(diào)用來提醒數(shù)據(jù)發(fā)生變化了。在當(dāng)前循環(huán)結(jié)束后它會(huì)再次啟動(dòng)來檢查是否有數(shù)據(jù)發(fā)生變化這被叫做臟檢查。它會(huì)多運(yùn)行一次以確保沒有數(shù)據(jù)發(fā)生變化。
1. 什么時(shí)候需要人為調(diào)用 $apply()?
AngularJS 只會(huì)關(guān)心在 AngularJS 的執(zhí)行上下文中 發(fā)生的數(shù)據(jù)模型(model)的變化(比如: 改變數(shù)據(jù)的代碼在 $apply() 里面)。AngularJS 內(nèi)建的指令 也會(huì)自動(dòng)觸發(fā) $digest 循環(huán), 所以任何數(shù)據(jù)模型(model)的改變也都會(huì)反映到視圖中。 但是, 如果更改一個(gè) 不在 AngularJS 執(zhí)行上下文中 的數(shù)據(jù)模型(model), 就需要人為的調(diào)用 $apply() 來提醒 AngularJS 數(shù)據(jù)發(fā)生變化了。
例如, 但使用JavaScript的 setTimeout() 函數(shù)來更新一個(gè)數(shù)據(jù)模型的時(shí)候, AngularJS 就沒有辦法知道你改變了數(shù)據(jù)模型。這種情況下, 就需要調(diào)用 $apply() 來觸發(fā) $digest 循環(huán)了。類似的, 如果自定義了一個(gè)指令, 這個(gè)指令設(shè)置了一個(gè) DOM 事件監(jiān)聽器, 更改數(shù)據(jù)模型的代碼在時(shí)間處理函數(shù)里, 那么也需要調(diào)用 $apply() 來保證更改能反映出來。
DEMO:
HTML 代碼:
demo
Delayed Message: {{message}}
JS 代碼:
var myApp = angular.module("myApp", [])
myApp.controller("myController", ["$scope", "$timeout", function($scope, $timeout) {
$scope.getMessage = function() {
// 方法1:
setTimeout(function() {
// 把需要寫的邏輯放入$apply函數(shù)內(nèi)
$scope.$apply(function() {
$scope.message = "Fetched after 3 seconds"
console.log("message: ", $scope.message);
})
}, 2000)
// 方法2:
// $timeout(function() {
// $scope.message = "Fetched after 3 seconds"
// console.log("message: ", $scope.message);
// }, 2000)
// 方法3:
// setTimeout(function() {
// $scope.message = "Fetched after 3 seconds"
// console.log("message: ", $scope.message);
// $scope.$apply() // 這里觸發(fā)了 $digest循環(huán)
// }, 2000)
}
$scope.getMessage()
}])
注意:
2. $digest 循環(huán)要執(zhí)行多少次呢但需要延時(shí)的時(shí)候, 盡可能的使用 $timeout, 這樣, 就不用人為的去調(diào)用 $apply() 了。
在調(diào)用 $apply() 的時(shí)候, 應(yīng)該總是要傳入函數(shù)參數(shù), 因?yàn)楫?dāng)為 $apply() 傳入函數(shù)的時(shí)候, 這個(gè)函數(shù)在調(diào)用的時(shí)候是包含在 try..catch 中, 并且任何發(fā)生的異常都能夠被 $exceptionHandler 服務(wù)所接收。
$digest 循環(huán)并不只是運(yùn)行一次。在當(dāng)前循環(huán)結(jié)束后, 它會(huì)再次啟動(dòng)來檢查是否有數(shù)據(jù)發(fā)生變化, 這被叫做 臟檢查。$digest 循環(huán)會(huì)一直保持循環(huán)直到再也沒有數(shù)據(jù)模型發(fā)生改變, 或者達(dá)到最大的循環(huán)次數(shù)(10次)。
3. 總結(jié)注意: $digest 至少會(huì)循環(huán)兩次即使監(jiān)聽函數(shù)沒有更改任何數(shù)據(jù)模型。它會(huì)多運(yùn)行一次以確保沒有數(shù)據(jù)發(fā)生變化。
如果 AngularJS 不能檢測(cè)到你的更改, 那么就必須人為調(diào)用 $apply()。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86905.html
摘要：本文針對(duì)的讀者具備性能優(yōu)化的相關(guān)知識(shí)雅虎條性能優(yōu)化原則高性能網(wǎng)站建設(shè)指南等擁有實(shí)戰(zhàn)經(jīng)驗(yàn)。這種機(jī)制能減少瀏覽器次數(shù)，從而提高性能。僅會(huì)檢查該和它的子，當(dāng)你確定當(dāng)前操作僅影響它們時(shí)，用可以稍微提升性能。 搬運(yùn)自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不覺，在項(xiàng)目中用angular已經(jīng)半年多了，踩了很多坑...
摘要：綜上所述兩者是出于不同的目的被創(chuàng)建的，解決的也是不同的問題。檢測(cè)模型變化的過程稱為循環(huán)。由指令注冊(cè)的事件處理函數(shù)執(zhí)行。該回調(diào)函數(shù)會(huì)更新插值表達(dá)式所在的屬性。模塊主要關(guān)系腳本加載問題。 AngularJS面試題 1.與jQuery的比較 jQuery js函數(shù)庫 封裝簡(jiǎn)化dom操作 使用jquery的思想是：我擁有一個(gè)DOM元素并且想讓它去做某件事。也就是命令式編程思想。 angula...
摘要：作為一個(gè)應(yīng)該具有經(jīng)?？偨Y(jié)反思的習(xí)慣如果不能及時(shí)總結(jié)可能就會(huì)忘記自己踩過的很多坑然后會(huì)導(dǎo)致同一個(gè)坑踩很多次所以我打算把這些都記錄下來以方便是對(duì)自己的重復(fù)記憶避免無效的另一方面可以希望可以給遇到相似問題的同僚們一些收獲手動(dòng)觸發(fā)臟檢查在開發(fā)過程中 作為一個(gè)coder,應(yīng)該具有經(jīng)?？偨Y(jié)反思的習(xí)慣,如果不能及時(shí)總結(jié),可能就會(huì)忘記自己踩過的很多坑,然后會(huì)導(dǎo)致同一個(gè)坑踩很多次,所以我打算把這些都記錄...
摘要：的特色是雙向綁定，復(fù)雜點(diǎn)說，有一個(gè)臟值檢測(cè)系統(tǒng)，主要包括和觸發(fā)里面有一個(gè)玩意叫被認(rèn)為是使與第三方庫混合使用最標(biāo)準(zhǔn)的方式。處理完成之后加一個(gè)即可，這個(gè)方法還適用于等但是我依舊建議在能不使用第三方庫的時(shí)候就不要使用。 從技術(shù)上來講，angular 與 jquery混用，是一件不太合適的，但是為什么這個(gè)話題爭(zhēng)論至今依舊仁者見仁智者見智，除了便捷度，還有可能就是jquery有些地方確實(shí)比ang...
閱讀 1822·2021-10-11 10:59
閱讀 2498·2021-09-30 09:53
閱讀 1868·2021-09-22 15:28
閱讀 2871·2019-08-29 15:29
閱讀 1626·2019-08-29 13:53
閱讀 3287·2019-08-29 12:34
閱讀 2922·2019-08-26 10:16
閱讀 2713·2019-08-23 15:16
