前言
相信大家在一開始用angular做項目的時候,一定碰到過$scope.$apply()
方法,表面上看,這像是一個幫助你進行數據更新的方法,那么,它為何存在,我們又該如何使用它呢。下面話不多說,來一起看看詳細的介紹吧。
JavaScript執行順序
JavaScript單線程操作,代碼按照代碼片段的順序來之行,每個代碼塊從運行到結束都不會被打斷,這也是為什么會發生瀏覽器阻塞的情況,往往是有一部分在運行,而導致其他所有的代碼段凍結。
每當有耗費時間較多的任務出現,例如等待一個click事件,等待Ajax請求的回應,我們都會設定一個回調函數,當click事件被觸發或者計時器完成,就會創建一個新的JavaScript turn,并執行完回調函數。
例如:
var button = document.getElementById('clickMe'); function buttonClicked () { alert('the button was clicked'); } button.addEventListener('click', buttonClicked); function timerComplete () { alert('timer complete'); } setTimeout(timerComplete, 2000);
當JavaScript代碼開始運行,先找到一個botton,并添加一個點擊的監聽事件,且設定一個timeout。瀏覽器會在這段代碼執行完畢之后進行web的更新,并且接受用戶的輸入。
如果瀏覽器檢測到一個新的點擊事件發生,他就會開始一個turn,來執行buttonClicked函數。當函數執行結束,這個階段也隨之結束。
經過2000毫秒,瀏覽器會創建一個過程來執行timerComplete。在這兩個過程之間,頁面被重繪,輸入被接收。
如何來更新綁定數據
Angular為我們提供了一些接口來綁定JavaScript代碼與數據,Angular 采用任何數據可以用來綁定,并在JavaScript的末位運行并進行,并檢查數據更新。
進行數據變化檢查的實際上是$digest函數,但是通常我們不是直接使用$digest函數,而是使用$apply,$apply函數接收表達式或者函數作為參數后調用$digest來更新監控器。
那我們究竟要什么時候來調用$apply呢,實際上,Angular幾乎在所有提供的代碼中添加了$apply,如ng-click,初始controller,$http的回調操作,在這,你并不需要親自調用 $apply,而且重復的調用會引起錯誤。
因此,當你運行了一個新階段,并且這部分并不屬于Angular庫的情況下才需要使用$apply。這有一段關于setTimeout的代碼,在經過了2000毫秒的延遲之后,代碼進入執行了一個新的階段,但是Angular并不知道數據有更新,因此更新并不會被顯示。
function Ctrl($scope) { $scope.message = "等2秒后進行更新"; setTimeout(function () { $scope.message = "時間到"; // AngularJS unaware of update to $scope }, 2000); }
為了方便大家的使用,Angular提供了$timeout來代替setTimeout,相當于在其中默認調用$apply。
如果在你的代碼中使用了除$http之外的Ajax調用,除了ng-*之外的監聽器,或者除了$timeout之外的計時器,都應該使用$scope.$apply
來同步顯示綁定。
總結
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com