AngularJS 作用域

作用域（scope）是 HTML（視圖）和 JavaScript（控制器）之間的綁定部分。

作用域是具有可用屬性和方法的對象。

作用域對視圖和控制器都是可用的。

如何使用作用域？

當你在 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}}。

理解作用域

如果我們把AngularJS應用程序看作是由以下幾部分組成：

  • 視圖，即 HTML。
  • 模型，即當前視圖可用的數據。
  • 控制器，即JavaScript函數，用于創建/更改/刪除/控制數據。

那么作用域就是模型。

作用域是一個具有屬性和方法的 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 = "Bill Gates";
});
</script>

親自試一試

了解你的作用域

在任何時候了解你正在處理的作用域是很重要的。

在上面的兩個例子中，只有一個作用域，所以了解你的作用域不是問題，但對于更大的應用程序，HTML DOM中的某些部分可能只能訪問某些作用域。

實例

當處理 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 來引用。

根作用域

所有應用程序都有一個 $rootScope，它是在包含 ng-app 指令的 HTML 元素上創建的作用域。

rootScope 在整個應用程序中可用。

如果某個變量在當前作用域和根作用域（rootScope）中具有相同的名稱，則應用程序將使用當前作用域中的變量。

實例

控制器的作用域和 rootScope 中都存在一個名為 "color" 的變量：

<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>

親自試一試