範圍的重要性

Created: November-22, 2018

由於 Angular 使用 HTML 擴充套件網頁和普通 Javascript 來新增邏輯，因此可以使用 ng-app ， ng-controller 和一些內建指令（如 ng-if ， ng-repeat 等）輕鬆建立網頁。使用新的控制器語法，Angular 使用者的新手可以將功能和資料附加到他們的控制器，而不是使用 $scope。

但是，遲早，重要的是要了解這個東西到底是什麼。它將不斷出現在示例中，因此瞭解一些內容非常重要。

好訊息是它是一個簡單而強大的概念。

建立以下內容時：

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

哪裡名住？

答案是 Angular 建立了一個 $rootScope 物件。這只是一個常規的 Javascript 物件，因此 name 是 $rootScope 物件上的一個屬性：

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

就像 Javascript 中的全域性範圍一樣，將專案新增到全域性範圍或 $rootScope 通常不是一個好主意。

當然，在大多數情況下，我們建立一個控制器並將我們所需的功能放入該控制器中。但是當我們建立一個控制器時，Angular 會發揮它的魔力併為該控制器建立一個 $scope 物件。這有時被稱為本地範圍。

所以，建立以下控制器：

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

允許通過 $scope 引數訪問本地範圍。

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

沒有 $scope 引數的控制器可能由於某種原因根本不需要它。但重要的是要意識到，即使使用 controllerAs 語法，也存在本地範圍。

由於 $scope 是一個 JavaScript 物件，因此 Angular 神奇地將其設定為原型繼承自 $rootScope。正如你可以想象的那樣，可以有一系列範圍。例如，你可以在父控制器中建立模型，並將其作為 $scope.model 附加到父控制器的作用域。

然後通過原型鏈，子控制器可以使用 $scope.model 在本地訪問相同的模型。

這一切都不是最初明顯的，因為它只是 Angular 在背景中發揮其魔力。但瞭解 $scope 是瞭解 Angular 如何工作的重要一步。