AngularJs 學習筆記(一)作用域
阿新 • • 發佈:2017-07-24
oot scrip angularjs col 層級 綁定 javascrip 指令 pan
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‘; 910 }) 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 學習筆記(一)作用域