AngularJs 學習筆記（一）範圍

標籤：html   roo   生命週期   測試   dom   parent   初始化   賦值   通過   

AngularJs採用了注重時效的MVC方式，是基於MVW模式。

1.$scope和範圍的概念。

AngularJs中的$scope對象是模板的領域模型，也稱作範圍執行個體，通過為其屬性賦值，可以傳遞給函數進行渲染，$scope對象可以精準地控制領域模型的資料和操作。

2.Controller控制器

其本質就是一個JavaScript函數，不需要擴充任何AngularJs的類或者API。其主要職責是初始化範圍執行個體，包括提供模型的初始值和增加UI相關的行為來擴充$scope對象。在設定模型初始值的時候，這與ng-init指令做同樣的工作，不過控制器不會汙染HTML模板。

進階——DOM樹驅動範圍樹結構的建立

　　AngularJs擁有$rootScope，它是其他所有範圍的父作用，會將根ng-app元素進行綁定，$rootScope是所有$scope對象的最上層，在新應用啟動的時候自動建立。$scope的概念與JavaScript分層的概念類似，在為子DOM元素建立新的範圍的時候，實際上是為子DOM元素建立了一個新的執行內容，其$parent屬性指向父範圍。$Scope都是Scope類的執行個體，其有很多方法來控製作用域的生命週期和提供事件傳播的功能，以及支援模板渲染等。AngularJs中的ng-controller指令會調用Scope對象的$new()方法建立新的範圍。

注意：盡量避免使用$parent屬性，因為它在AngularJs運算式和模板建立的DOM結構間建立了強關聯，另一種解決方案就是講變數綁定為某一對象的屬性。

       測試代碼：

 1 <div ng-app="MyApp"> 2  3     <script> 4         var app=angular.module(‘MyApp‘,[]).run(function($rootScope) { 5             $rootScope.name=‘MyApp‘; 6         }) 7         app.controller(‘myControl_1‘,function ($scope) { 8             $scope.name=‘myControl‘; 9 10         })11         app.controller(‘myControl_2‘,function ($scope) {12            $scope.name=‘myControl_2‘;13 14         })15         app.controller(‘myControl_3‘,function ($scope) {16            $scope.name=‘myControl_3‘17 18         })19         app.controller(‘myControl_4‘,function ($scope) {20            $scope.name=‘myControl_4‘21 22         })23 24     </script>25         {{ name }}26     <div ng-controller="myControl_1">27         {{ name }}28     </div>29     <div ng-controller="myControl_2">30             {{ name }}31         <div ng-controller="myControl_3">32                 {{ name }}33         </div>34     </div>35     <div ng-controller="myControl_4">36             {{ name }}37     </div>38 </div>

 

       運行結果：

      

       範圍的層級關係如下：

 

　　

 

AngularJs 學習筆記（一）範圍