AngularJS フレームワークにおける $scope の役割とライフサイクルの詳細な分析_AngularJS

$scope は Angular アプリ アプリケーション全体で使用され、データ モデルに関連付けられており、$scope を使用すると、スコープ ビューに基づいてチャネルが確立されます。 , データが変更されると、$scope がすぐに更新され、ビューがすぐに再レンダリングされます。

$scope をブリッジとして使用すると、アプリケーションのビジネス コードをすべてコントローラー内に置くことができ、データはコントローラーの $scope に保存されます。

$scope は、ビュー (DOM 要素) をコントローラーに接続するオブジェクトです。 MVC 構造では、この $scope がモデルとなり、DOM 要素 (およびその子) にバインドされた実行コンテキストを提供します。

少し複雑に聞こえますが、$scope は実際にはコントローラーとビューの両方からアクセスできる JavaScript オブジェクトなので、これを使用して 2 つの間で情報を渡すことができます。この $scope オブジェクトには、ビュー上で実行されるデータと関数の両方を保存します。

すべての Angular アプリケーションには $rootScope があります。この $rootScope はトップレベルのスコープであり、ng-app ディレクティブ属性を含む DOM 要素に対応します。

$scope がページに明示的に設定されていない場合、Angular はここでデータと関数をバインドします。最初の部分の例はこれに依存して正常に実行されます。

この例では、$rootScope を使用します。 main.js ファイルで、このスコープに name 属性を追加します。この関数を app.run 関数内で実行することにより、アプリケーションの他の部分よりも前に実行されるようになります。 app.run 関数は、Angular アプリケーションのメイン メソッドと考えることができます。

app.run(function($rootScope) {
 $rootScope.name = "Ari Lerner";
});

これで、次のようにテンプレート式 {{}} を使用して、ビュー内の任意の場所でこの name 属性にアクセスできるようになります。

{{ name }}

$rootScope
Angular アプリケーションが起動してビューを生成すると、ルート ng-app 要素が $rootScope にバインドされます。$rootScope はすべての $scope のトップレベル オブジェクトであり、Angular のグローバル スコープ オブジェクトとして理解できます。アプリケーションにあまりにも多くのロジックや変数を追加するのは良い考えではありません。それは Javascript のグローバル スコープを汚染するのと同じです。

$scope の役割
$scope オブジェクトは、一般的な MVC フレームワークにおける Model の役割である Angular のデータ モデルとして機能しますが、$scope は処理や処理を行わないため、通常の意味でのデータ モデルとまったく同じではありません。データを操作するだけで、ビューと HTML の間にブリッジが確立され、ビューとコントローラー間の友好的な通信が可能になります。 その機能と機能をさらに体系的に分割してみましょう:

データ モデルの変更を監視するオブザーバーを提供します

• データモデルの変更をアプリ全体に通知できます
• ビジネス機能とデータを分離するためにネスト可能
• 式のコンテキスト実行環境を提供します
JavaScript で新しい実行コンテキストを作成すると、実際には関数を使用して新しいローカル コンテキストが作成され、子 DOM 要素の新しいスコープが作成されます。

$scope ライフサイクル

Angular には「イベント」という概念もあります。たとえば、ng-model にバインドされた入力値が変更されたとき、または ng-click ボタンがクリックされたときに、Angular のイベント ループが開始されます。 Angular の非常に中心的な概念です。この記事の主な焦点ではないため、詳細については説明しません。興味がある場合は、ここでの情報を読んでください。このイベントは Angular の実行コンテキストと $scope で処理されます。この時点で、イベント ループが開始され、Angular はアプリケーション内のすべてのオブジェクトを監視し、ダーティ値チェック ループも開始されます。
$scope のライフサイクルには 4 つの段階があります:

1.

を作成します。

コントローラーまたはディレクティブが作成されると、Angular は $injector を使用して新しいスコープを作成し、コントローラーまたはディレクティブの実行時にスコープをそれに渡します。

2. リンク

Angular が開始されると、すべての $scope オブジェクトがビューにアタッチまたはリンクされ、$scope オブジェクトを作成するすべての関数もビューにアタッチされます。これらのスコープは、Angular コンテキストが変更されたときに実行されるように登録されます。関数。つまり、Angular はこれらの関数を使用するか、イベント ループを開始します。

3. アップデート

イベント ループが実行を開始すると、独自のダーティ値検出の実行が開始され、変更が検出されると、$scope で指定されたコールバック関数がトリガーされます。

4. 破壊する

一般に、$scope がビュー内で不要になった場合、Angular はそれを自動的にクリーンアップします。もちろん、$destroy() 関数を使用して手動でクリーンアップすることもできます。

ng-コントローラー

$scope オブジェクトを明示的に作成するには、ng-controller ディレクティブ属性を使用して、コントローラー オブジェクトを DOM 要素にアタッチする必要があります。

ng-controller指令给所在的DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。在上面的例子里，这个外层DOM元素的$scope 对象，就是$rootScope 对象。这个scope链是这样的：

现在，MyController 给我们建立了一个可以从DOM元素内部直接访问的$scope 对象。下面我们在的这个$scope 里创建一个person对象，在main.js中：

app.controller('MyController', function($scope) {
 $scope.person = {
  name: "Ari Lerner"
 };
});

现在我们可以在有ng-controller='MyController'属性的DOM元素的任何子元素里访问这个person 对象，因为它在$scope上。
除了一个例外，所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到$rootScope 上。

唯一的例外：有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们。

举个例子，假设我们有一个ParentController ，含有一个person 对象，又有一个ChildController 想要访问这个对象：

app.controller('ParentController', function($scope) {
 $scope.person = {greeted: false};
});
 
app.controller('ChildController', function($scope) {
 $scope.sayHello = function() {
  $scope.person.greeted = true;
 }
});

当我们在view里把ChildController 绑定到ParentController 之下，在子元素里我们就能访问ParentController 创建的父scope的属性，像访问ChildController 自己的scope中的属性一样：

<div ng-controller="ParentController">
 <div ng-controller="ChildController">
  <input type="text" ng-model="person.name" placeholder="Name"></input>
  <a ng-click="sayHello()">Say hello</a>
 </div>
 {{ person }}
</div>