AngularJS Scope
Scope 是 HTML (檢視) 和 JavaScript (控制器) 之間的繫結部分。
Scope 是一個包含可用屬性和方法的物件。
Scope 對檢視和控制器都可用。
如何使用 Scope?
當你建立一個 AngularJS 控制器時，你會將 $scope 物件作為引數傳遞
示例
在控制器中建立的屬性可以在檢視中引用
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
自己動手試一試 »
在控制器中向 $scope 物件新增屬性時，檢視 (HTML) 可以訪問這些屬性。
在檢視中，你不使用 $scope 字首，你只需引用屬性名，例如 {{carname}}。
理解 Scope
如果我們考慮一個 AngularJS 應用程式由以下部分組成：
- 檢視，即 HTML。
- 模型，即當前檢視可用的資料。
- 控制器，即建立/更改/刪除/控制資料的 JavaScript 函式。
那麼 Scope 就是模型。
Scope 是一個具有屬性和方法的 JavaScript 物件，它們對檢視和控制器都可用。
示例
如果你在檢視中進行更改，模型和控制器也會更新
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
自己動手試一試 »
瞭解你的 Scope
在任何時候，瞭解你正在處理哪個 Scope 都很重要。
在上面的兩個示例中只有一個 Scope，所以瞭解你的 Scope 不是問題，但對於大型應用程式，HTML DOM 中可能存在只能訪問特定 Scope 的部分。
示例
當處理 ng-repeat 指令時，每次重複都可以訪問當前重複的物件
<div ng-app="myApp" ng-controller="myCtrl">
<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"];
});
</script>
自己動手試一試 »
每個 <li> 元素都可以訪問當前重複的物件，在本例中是一個字串，可以透過使用 x 來引用。
Root Scope
所有應用程式都有一個 $rootScope，它是在包含 ng-app 指令的 HTML 元素上建立的 Scope。
$rootScope 在整個應用程式中都可用。
如果一個變數在當前 Scope 和 rootScope 中同名，應用程式將使用當前 Scope 中的變數。
示例
名為 "color" 的變數同時存在於控制器的 Scope 和 rootScope 中
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
</script>
</body>
自己動手試一試 »
