資訊專(zhuān)欄INFORMATION COLUMN
摘要：但是如果更改一個(gè)不在執(zhí)行上下文中的數(shù)據(jù)模型就需要人為的調(diào)用來(lái)提醒數(shù)據(jù)發(fā)生變化了。在當(dāng)前循環(huán)結(jié)束后它會(huì)再次啟動(dòng)來(lái)檢查是否有數(shù)據(jù)發(fā)生變化這被叫做臟檢查。它會(huì)多運(yùn)行一次以確保沒(méi)有數(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() 來(lái)提醒 AngularJS 數(shù)據(jù)發(fā)生變化了。
例如, 但使用JavaScript的 setTimeout() 函數(shù)來(lái)更新一個(gè)數(shù)據(jù)模型的時(shí)候, AngularJS 就沒(méi)有辦法知道你改變了數(shù)據(jù)模型。這種情況下, 就需要調(diào)用 $apply() 來(lái)觸發(fā) $digest 循環(huán)了。類(lèi)似的, 如果自定義了一個(gè)指令, 這個(gè)指令設(shè)置了一個(gè) DOM 事件監(jiān)聽(tīng)器, 更改數(shù)據(jù)模型的代碼在時(shí)間處理函數(shù)里, 那么也需要調(diào)用 $apply() 來(lái)保證更改能反映出來(lái)。
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() {
// 把需要寫(xiě)的邏輯放入$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)來(lái)檢查是否有數(shù)據(jù)發(fā)生變化, 這被叫做 臟檢查。$digest 循環(huán)會(huì)一直保持循環(huán)直到再也沒(méi)有數(shù)據(jù)模型發(fā)生改變, 或者達(dá)到最大的循環(huán)次數(shù)(10次)。
3. 總結(jié)注意: $digest 至少會(huì)循環(huán)兩次即使監(jiān)聽(tīng)函數(shù)沒(méi)有更改任何數(shù)據(jù)模型。它會(huì)多運(yùn)行一次以確保沒(méi)有數(shù)據(jù)發(fā)生變化。
如果 AngularJS 不能檢測(cè)到你的更改, 那么就必須人為調(diào)用 $apply()。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/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/ 不知不覺(jué)，在項(xiàng)目中用angular已經(jīng)半年多了，踩了很多坑...
摘要：綜上所述兩者是出于不同的目的被創(chuàng)建的，解決的也是不同的問(wèn)題。檢測(cè)模型變化的過(guò)程稱(chēng)為循環(huán)。由指令注冊(cè)的事件處理函數(shù)執(zhí)行。該回調(diào)函數(shù)會(huì)更新插值表達(dá)式所在的屬性。模塊主要關(guān)系腳本加載問(wèn)題。 AngularJS面試題 1.與jQuery的比較 jQuery js函數(shù)庫(kù) 封裝簡(jiǎn)化dom操作 使用jquery的思想是：我擁有一個(gè)DOM元素并且想讓它去做某件事。也就是命令式編程思想。 angula...
摘要：作為一個(gè)應(yīng)該具有經(jīng)常總結(jié)反思的習(xí)慣如果不能及時(shí)總結(jié)可能就會(huì)忘記自己踩過(guò)的很多坑然后會(huì)導(dǎo)致同一個(gè)坑踩很多次所以我打算把這些都記錄下來(lái)以方便是對(duì)自己的重復(fù)記憶避免無(wú)效的另一方面可以希望可以給遇到相似問(wèn)題的同僚們一些收獲手動(dòng)觸發(fā)臟檢查在開(kāi)發(fā)過(guò)程中 作為一個(gè)coder,應(yīng)該具有經(jīng)?？偨Y(jié)反思的習(xí)慣,如果不能及時(shí)總結(jié),可能就會(huì)忘記自己踩過(guò)的很多坑,然后會(huì)導(dǎo)致同一個(gè)坑踩很多次,所以我打算把這些都記錄...
摘要：的特色是雙向綁定，復(fù)雜點(diǎn)說(shuō)，有一個(gè)臟值檢測(cè)系統(tǒng)，主要包括和觸發(fā)里面有一個(gè)玩意叫被認(rèn)為是使與第三方庫(kù)混合使用最標(biāo)準(zhǔn)的方式。處理完成之后加一個(gè)即可，這個(gè)方法還適用于等但是我依舊建議在能不使用第三方庫(kù)的時(shí)候就不要使用。 從技術(shù)上來(lái)講，angular 與 jquery混用，是一件不太合適的，但是為什么這個(gè)話題爭(zhēng)論至今依舊仁者見(jiàn)仁智者見(jiàn)智，除了便捷度，還有可能就是jquery有些地方確實(shí)比ang...
閱讀 1823·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
