angularjs探秘五 举足轻重的scope
scope在angular中的作用可謂舉足輕重,不理解scope就不會angular;
scope是應用在 HTML (view) 和 JavaScript (controller)之間的紐帶。
scope是一個js對象(pojo),有可用的方法和屬性(即定義在controller中的所有屬性和函數)。
對于scope的定義和作用在第三篇有提到過。
scope在定義controller時首先被注入,然后作為參數被引用,controller中的所有屬性和函數皆以scope為對象聲明的屬性和函數,在view(HTML)中使用controller的屬性及函數都不需要加scope
<div ng-controller="contr_1"><ul ng-repeat="x in list"><li ng-bind="x"></li></ul></div> MyApp.controller("contr_1",["$scope",function($scope){$scope.list=['html','javascript','jquery','css','angularjs'];$scope.c1_title="標題C1"; }]);========================================================================================================================================
scope的作用范圍
先看個例子:
MyApp.controller("contr_1",["$scope",function($scope){$scope.c1_title="標題C1"; }]);MyApp.controller("contr_2",["$scope",function($scope){$scope.c2_title="標題C2"; }]); <div ng-controller="contr_1"><h1 ng-bind="c1_title"></h1> <!--顯示 標題C1--></div><div ng-controller="contr_2"><h1 ng-bind="c1_title"></h1> <!--不顯示--><h1 ng-bind="c2_title"></h1> <!--顯示 標題C2--></div>這個例子中 contr_1 的作用范圍僅是 contr_1 所屬的div的范圍,所以第二個 c1_title 獲取不到值scope超出范圍了。
========================================================================================================================================
根scope
根scope存在于ng-app上,也就是說ng-app范圍有多大,根scope作用范圍就有多大;ng-app一個頁面有且只有一個,同樣根scope也是有且只有一個。
<div ng-controller="contr_1"><h1 ng-bind="c1_title"></h1> <!--顯示 標題C1--><h1 ng-bind="title"></h1> <!--顯示 我是全局scope--></div><div ng-controller="contr_2"><h1 ng-bind="title"></h1> <!--顯示 我是全局scope--><h1 ng-bind="c1_title"></h1> <!--不顯示--><h1 ng-bind="c2_title"></h1> <!--顯示 標題C2--></div> <!--js--> MyApp.controller("contr_1",["$scope","$rootScope",function($scope,$rootScope){$scope.c1_title="標題C1";$rootScope.title="我是全局scope"; }]);MyApp.controller("contr_2",["$scope",function($scope){$scope.c2_title="標題C2"; }]);這里盡管 $rootScope 在 contr_1 中定義其屬性,但在全局都能使用$rootScope定義的屬性;$rootScope有且只有一個,若有多個同名屬性或函數,默認取最后一個屬性或函數。
轉載于:https://www.cnblogs.com/MirageFox/p/7767566.html
總結
以上是生活随笔為你收集整理的angularjs探秘五 举足轻重的scope的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Puppet 资源公有属性的其他描述方式
- 下一篇: 数组-slice、indexOf