AngularJS 中的 $digest() 和 $apply()

alanoddsoff 發布于2019-08-21 11:36 / 986人閱讀

摘要：但是如果更改一個不在執行上下文中的數據模型就需要人為的調用來提醒數據發生變化了。在當前循環結束后它會再次啟動來檢查是否有數據發生變化這被叫做臟檢查。它會多運行一次以確保沒有數據發生變化。

1. 什么時候需要人為調用 $apply()?

AngularJS 只會關心在 AngularJS 的執行上下文中 發生的數據模型(model)的變化(比如: 改變數據的代碼在 $apply() 里面)。AngularJS 內建的指令 也會自動觸發 $digest 循環, 所以任何數據模型(model)的改變也都會反映到視圖中。但是, 如果更改一個 不在 AngularJS 執行上下文中 的數據模型(model), 就需要人為的調用 $apply() 來提醒 AngularJS 數據發生變化了。

例如, 但使用JavaScript的 setTimeout() 函數來更新一個數據模型的時候, AngularJS 就沒有辦法知道你改變了數據模型。這種情況下, 就需要調用 $apply() 來觸發 $digest 循環了。類似的, 如果自定義了一個指令, 這個指令設置了一個 DOM 事件監聽器, 更改數據模型的代碼在時間處理函數里, 那么也需要調用 $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函數內
            $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() // 這里觸發了 $digest循環
        // }, 2000)
    }

    $scope.getMessage()
}])

注意:

但需要延時的時候, 盡可能的使用 $timeout, 這樣, 就不用人為的去調用 $apply() 了。
在調用 $apply() 的時候, 應該總是要傳入函數參數, 因為當為 $apply() 傳入函數的時候, 這個函數在調用的時候是包含在 try..catch 中, 并且任何發生的異常都能夠被 $exceptionHandler 服務所接收。

2. $digest 循環要執行多少次呢

$digest 循環并不只是運行一次。在當前循環結束后, 它會再次啟動來檢查是否有數據發生變化, 這被叫做 臟檢查。$digest 循環會一直保持循環直到再也沒有數據模型發生改變, 或者達到最大的循環次數(10次)。

注意: $digest 至少會循環兩次即使監聽函數沒有更改任何數據模型。它會多運行一次以確保沒有數據發生變化。

3. 總結

如果 AngularJS 不能檢測到你的更改, 那么就必須人為調用 $apply()。

云服務器 GPU云服務器 js中的call和apply AngularJS中的SQL bootstrap和angularjs JS中bind、call和apply的作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86905.html

angular性能優化心得

摘要：本文針對的讀者具備性能優化的相關知識雅虎條性能優化原則高性能網站建設指南等擁有實戰經驗。這種機制能減少瀏覽器次數，從而提高性能。僅會檢查該和它的子，當你確定當前操作僅影響它們時，用可以稍微提升性能。搬運自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不覺，在項目中用angular已經半年多了，踩了很多坑...

guqiu 2019-08-19 14:44 評論0 收藏0
總結的AngularJS1版本的一些面試問題

摘要：綜上所述兩者是出于不同的目的被創建的，解決的也是不同的問題。檢測模型變化的過程稱為循環。由指令注冊的事件處理函數執行。該回調函數會更新插值表達式所在的屬性。模塊主要關系腳本加載問題。 AngularJS面試題 1.與jQuery的比較 jQuery js函數庫封裝簡化dom操作使用jquery的思想是：我擁有一個DOM元素并且想讓它去做某件事。也就是命令式編程思想。 angula...

defcon 2019-08-21 16:18 評論0 收藏0
angularJS開發的注意事項匯總

摘要：作為一個應該具有經常總結反思的習慣如果不能及時總結可能就會忘記自己踩過的很多坑然后會導致同一個坑踩很多次所以我打算把這些都記錄下來以方便是對自己的重復記憶避免無效的另一方面可以希望可以給遇到相似問題的同僚們一些收獲手動觸發臟檢查在開發過程中作為一個coder,應該具有經常總結反思的習慣,如果不能及時總結,可能就會忘記自己踩過的很多坑,然后會導致同一個坑踩很多次,所以我打算把這些都記錄...

Null 2019-08-22 11:15 評論0 收藏0
關于angularJs中使用$.ajax的注意點

摘要：的特色是雙向綁定，復雜點說，有一個臟值檢測系統，主要包括和觸發里面有一個玩意叫被認為是使與第三方庫混合使用最標準的方式。處理完成之后加一個即可，這個方法還適用于等但是我依舊建議在能不使用第三方庫的時候就不要使用。從技術上來講，angular 與 jquery混用，是一件不太合適的，但是為什么這個話題爭論至今依舊仁者見仁智者見智，除了便捷度，還有可能就是jquery有些地方確實比ang...

wayneli 2019-08-21 11:52 評論0 收藏0