scope在angular中的作用可謂舉足輕重，不理解scope就不會(huì)angular；

scope是應(yīng)用在 HTML (view) 和 JavaScript (controller)之間的紐帶。

scope是一個(gè)js對(duì)象(pojo)，有可用的方法和屬性(即定義在controller中的所有屬性和函數(shù))。

對(duì)于scope的定義和作用在第三篇有提到過(guò)。

scope在定義controller時(shí)首先被注入，然后作為參數(shù)被引用，controller中的所有屬性和函數(shù)皆以scope為對(duì)象聲明的屬性和函數(shù)，在view(HTML)中使用controller的屬性及函數(shù)都不需要加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="標(biāo)題C1"; }]);

========================================================================================================================================

scope的作用范圍

先看個(gè)例子：

MyApp.controller("contr_1",["$scope",function($scope){$scope.c1_title="標(biāo)題C1"; }]);MyApp.controller("contr_2",["$scope",function($scope){$scope.c2_title="標(biāo)題C2"; }]); <div ng-controller="contr_1"><h1 ng-bind="c1_title"></h1> <!--顯示 標(biāo)題C1--></div><div ng-controller="contr_2"><h1 ng-bind="c1_title"></h1> <!--不顯示--><h1 ng-bind="c2_title"></h1> <!--顯示 標(biāo)題C2--></div>

這個(gè)例子中 contr_1 的作用范圍僅是 contr_1 所屬的div的范圍，所以第二個(gè) c1_title 獲取不到值scope超出范圍了。

========================================================================================================================================

根scope

根scope存在于ng-app上，也就是說(shuō)ng-app范圍有多大，根scope作用范圍就有多大；ng-app一個(gè)頁(yè)面有且只有一個(gè)，同樣根scope也是有且只有一個(gè)。

<div ng-controller="contr_1"><h1 ng-bind="c1_title"></h1> <!--顯示 標(biāo)題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> <!--顯示 標(biāo)題C2--></div> <!--js--> MyApp.controller("contr_1",["$scope","$rootScope",function($scope,$rootScope){$scope.c1_title="標(biāo)題C1";$rootScope.title="我是全局scope"; }]);MyApp.controller("contr_2",["$scope",function($scope){$scope.c2_title="標(biāo)題C2"; }]);

這里盡管 $rootScope 在 contr_1 中定義其屬性，但在全局都能使用$rootScope定義的屬性；$rootScope有且只有一個(gè)，若有多個(gè)同名屬性或函數(shù)，默認(rèn)取最后一個(gè)屬性或函數(shù)。

轉(zhuǎn)載于:https://www.cnblogs.com/MirageFox/p/7767566.html

總結(jié)

以上是生活随笔為你收集整理的angularjs探秘五 举足轻重的scope的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。