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