AngularJS Scope(作用域)
Scope(作用域) 是應用在HTML (視圖) 和JavaScript (控制器)之間的紐帶。
Scope 是一個對象，有可用的方法和屬性。
Scope 可應用在視圖和控制器上。
如何使用Scope
當你在AngularJS創建控制器時，你可以將$scope對象當作一個參數傳遞:
AngularJS 實例
控制器中的屬性對應了視圖上的屬性：
< div ng-app= "myApp" ng-controller= "myCtrl" >
< h1 > {{carname}} < /h1 >
< /div >
< script >
< h1 > {{carname}} < /h1 >
< /div >
< script >
var app = angular.module( 'myApp' , []);
app.controller( 'myCtrl' , function ($scope) {
$scope.carname = "Volvo" ;
});
app.controller( 'myCtrl' , function ($scope) {
$scope.carname = "Volvo" ;
});
< /script >
嘗試一下»
當在控制器中添加$scope對象時，視圖(HTML)可以獲取了這些屬性。
視圖中，你不需要添加$scope前綴,只需要添加屬性名即可，如：{{carname}}。
Scope 概述
AngularJS 應用組成如下：
- View(視圖), 即HTML。
- Model(模型), 當前視圖中可用的數據。
- Controller(控制器), 即JavaScript 函數，可以添加或修改屬性。
scope 是模型。
scope 是一個JavaScript 對象，帶有屬性和方法，這些屬性和方法可以在視圖和控制器中使用。
AngularJS 實例
如果你修改了視圖，模型和控制器也會相應更新：
< div ng-app= "myApp" ng-controller= "myCtrl" >
< input ng-model= "name" >
< h1 >我的名字是{{name}} < /h1 >
< /div >
< script >
< input ng-model= "name" >
< h1 >我的名字是{{name}} < /h1 >
< /div >
< script >
var app = angular.module( 'myApp' , []);
app.controller( 'myCtrl' , function ($scope) {
$scope.name = "John Dow" ;
});
app.controller( 'myCtrl' , function ($scope) {
$scope.name = "John Dow" ;
});
< /script >
嘗試一下»
Scope 作用範圍
了解你當前使用的scope 是非常重要的。
在以上兩個實例中，只有一個作用域scope，所以處理起來比較簡單，但在大型項目中， HTML DOM 中有多個作用域，這時你就需要知道你使用的scope 對應的作用域是哪一個。
AngularJS 實例
當我們使用ng-repeat指令時，每個重複項都訪問了當前的重複對象:
< div ng-app= "myApp" ng-controller= "myCtrl" >
< ul >
< li ng-repeat= "x in names" > {{x}} < /li >
< /ul >
< /div >
< script >
< ul >
< li ng-repeat= "x in names" > {{x}} < /li >
< /ul >
< /div >
< script >
var app = angular.module( 'myApp' , []);
app.controller( 'myCtrl' , function ($scope) {
$scope.names = [ "Emil" , "Tobias" , "Linus" ];
});
app.controller( 'myCtrl' , function ($scope) {
$scope.names = [ "Emil" , "Tobias" , "Linus" ];
});
< /script >
嘗試一下»
每個<li>元素可以訪問當前的重複對象，這裡對應的是一個字符串，並使用變量x表示。
根作用域
所有的應用都有一個$rootScope ，它可以作用在ng-app指令包含的所有HTML元素中。
$rootScope可作用於整個應用中。是各個controller 中scope 的橋樑。 用rootscope 定義的值，可以在各個controller 中使用。
AngularJS 實例
創建控制器時，將$rootScope 作為參數傳遞，可在應用中使用：
< div ng-app= "myApp" ng-controller= "myCtrl" >
< h1 > {{lastname}}家族成員: < /h1 >
< ul >
< li ng-repeat= "x in names" > {{x}} {{lastname}} < /li >
< /ul >
< /div >
< script >
< h1 > {{lastname}}家族成員: < /h1 >
< ul >
< li ng-repeat= "x in names" > {{x}} {{lastname}} < /li >
< /ul >
< /div >
< script >
var app = angular.module( 'myApp' , []);
app.controller( 'myCtrl' , function ($scope, $rootScope) {
$scope.names = [ "Emil" , "Tobias" , "Linus" ];
$rootScope.lastname = "Refsnes" ;
});
app.controller( 'myCtrl' , function ($scope, $rootScope) {
$scope.names = [ "Emil" , "Tobias" , "Linus" ];
$rootScope.lastname = "Refsnes" ;
});
< /script >
嘗試一下»