1. angular的數據綁定采用什么機制?詳述原理
angularjs的雙向數據綁定,采用臟檢查(dirty-checking)機制。ng只有在指定事件觸發后,才進入 $digest cycle :
- DOM事件,譬如用戶輸入文本,點擊按鈕等。( ng-click )
- XHR響應事件 ( $http )
- 瀏覽器Location變更事件 ( $location )
- Timer事件( $timeout , $interval )
- 執行 $digest() 或 $apply()
2. 依賴注入(DI)
讓我們可以不用自己實例化就能創建依賴對象的方法. 簡單的來說, 依賴是以注入的方式傳遞的。在Web應用中, Angular讓我們可以通過DI來創建像Controllers和Directives這樣的對象. 我們還可以創建自己的依賴對象, 當我們要實例化它們時, Angular能自動實現注入。
3. compile和link的區別:性能和能力
編譯的時候,compile轉換dom,碰到綁定監聽器的地方就先存着,有幾個存幾個,到最后匯總成一個link函數,一並執行,提升了性能。
|
如果指令只進行DOM的修改,不進行數據綁定,那么配置在compile函數中,如果指令要進行數據綁定,那么配置在link函數中。
4. $apply()和 $digest()的區別
安全性:$apply()可以接收一個參數作為function(),這個 function 會被包裝到一個 try … catch 塊中,所以一旦有異常發生,該異常會被 $exceptionHandler service 處理。
- $apply會使ng進入 $digest cycle , 並從$rootScope開始遍歷(深度優先)檢查數據變更。
- $digest僅會檢查該scope和它的子scope,當你確定當前操作僅影響它們時,用$digest可以稍微提升性能。
5.ng-if 跟 ng-show/hide 的區別有哪些?
第一點區別:ng-if
在后面表達式為 true 的時候才創建這個 dom 節點;ng-show
是初始時就創建了,用 display:block
和display:none
來控制顯示和不顯示。
第二點區別:ng-if
會(隱式地)產生新作用域,ng-switch
、 ng-include
等會動態創建一塊界面的也是如此。
這樣會導致,在 ng-if
中用基本變量綁定 ng-model
,並在外層 div 中把此 model 綁定給另一個顯示區域,內層改變時,外層不會同步改變,因為此時已經是兩個變量了。
<p>{{name}}</p> <div ng-if="true"> <input type="text" ng-model="name"> </div>
ng-show
不存在此問題,因為它不自帶一級作用域。
避免這類問題出現的辦法是,始終將頁面中的元素綁定到對象的屬性(data.x)而不是直接綁定到基本變量(x)上。
6.