$ scopeと$ rootScopeの違い


90

$ scopeと$ rootScopeの違いを誰かが説明できますか?

おもう

$ scope:

これを使用することにより、特定のページから特定のコントローラーのng-modelプロパティを取得できます。


$ rootScope

これを使用して、任意のページから任意のコントローラーのすべてのng-modelプロパティを取得できます。


これは正しいです?または他に何か?


@CodeError!つまり、そのリンクは私の質問に役立ちません。$ scope。$ rootがあります。$ rootScopeではありません

$ rootScopeは、角度アプリのすべてのスコープの階層の最上位にあります。
Angad

回答:


87

「$ rootScope」は、Webページで作成されたすべての「$ scope」角度オブジェクトの親オブジェクトです。

ここに画像の説明を入力してください

$ scope ng-controllerはで作成され、$ rootscopeはで作成されng-appます。

ここに画像の説明を入力してください


67

主な違いは、オブジェクトに割り当てられたプロパティの可用性です。で割り当てられたプロパティ$scopeは、それが定義されているコントローラの外部では使用できません。$rootScopeどこでも使用できます。

例:以下の例の場合、departmentプロパティで置き換える$rootScope$scope、2番目のコントローラーの最初のコントローラーからデータが入力されません。

angular.module('example', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.name = 'World';
      $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function($scope) {
      $scope.names = ['Igor', 'Misko', 'Vojta'];
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="example">
  <div class="show-scope-demo">
    <div ng-controller="GreetController">
      Hello {{name}}!
    </div>
    <div ng-controller="ListController">
      <ol>
        <li ng-repeat="name in names">{{name}} from {{department}}</li>
      </ol>
    </div>
  </div>
</body>


18

AngularのScopesへ開発者ガイドによると:

各Angularアプリケーションにはルートスコープが1つありますが、子スコープが複数ある場合があります。一部のディレクティブは新しい子スコープを作成するため、アプリケーションは複数のスコープを持つことができます(どのディレクティブが新しい​​スコープを作成するかについては、ディレクティブのドキュメントを参照してください)。新しいスコープが作成されると、それらは親スコープの子として追加されます。これにより、接続先のDOMに対応するツリー構造が作成されます。

コントローラとディレクティブはどちらもスコープを参照しますが、相互には参照しません。この配置により、コントローラーはディレクティブおよびDOMから分離されます。これは、コントローラーを不可知論的に表示するため、重要なポイントです。これにより、アプリケーションのテストストーリーが大幅に改善されます。


13

$rootScope$scope現在のコントローラーとその子だけが使用できるのに対し、現在使用しているコントローラーに関係なく、グローバルに使用できます。


3

別の方法でこれを見ることができます。$rootScopeグローバル$scopeですがローカルです。ときは、Controllerページに割り当てられているので、$scopeそれはこのコントローラに結合するので、変数は、ここで使用することができます。しかし、その値を他のコントローラーまたはサービスと共有したい場合は、それ$rootScopeが使用されます(**別の方法があり、値を共有できますが、この場合は使用したい$rootScope)。

これらの2つの単語をどのように定義するかについての2番目の質問は正しいです。

最後に少しずれますので、ご$rootScope注意ください。グローバル変数を使用する方法と同様に、デバッグが面倒になる可能性があり、タイマー内のどこかで誤ってグローバル変数を変更したり、読み取り値を不正確にする可能性があります。



2

スコープについては、公式の詳細なAngularドキュメントを読むことをお勧めします。「スコープ階層」セクションから始めます。

https://docs.angularjs.org/guide/scope

基本的に、$ rootScopeと$ scopeはどちらもDOMの特定の部分を識別します。

  • 角度演算を行う
  • $ rootScopeまたは$ scopeの一部として宣言された変数が利用可能です

$ rootScopeに属するものはすべてAngularアプリ全体で利用できますが、$ scopeに属するものはすべて、そのスコープが適用されるDOMの部分内で利用できます。

$ rootScopeは、Angularアプリのルート要素であるDOM要素に適用されます(そのため、$ rootScopeという名前になります)。ng-appディレクティブをDOMの要素に追加すると、これは$ rootScopeが使用可能なDOMのルート要素になります。言い換えると、$ rootScopeのプロパティなどは、Angularアプリケーション全体で使用できます。

Angular $ scope(およびそのすべての変数と操作)は、アプリケーション内のDOMの特定のサブセットで使用できます。特に、特定のコントローラーの$ scopeは、その特定のコントローラーが適用されているDOMの部分で使用できます(ng-controllerディレクティブを使用)。ただし、ng-repeatなどの特定のディレクティブは、コントローラーが適用されているDOMの一部内で適用されると、メインスコープの子スコープを作成できます-同じコントローラー内で-コントローラーは必ずしも1つのスコープしか含まない場合があります。

Angularアプリを実行するときに生成されたHTMLを見ると、スコープが適用されている要素(ルート要素を含む)にng-scopeクラスが追加されているため、スコープを「含む」DOM要素が簡単にわかります$ rootScopeを持つアプリの)。

ちなみに、$ scopeと$ rootScopeの先頭にある「$」記号は、Angularによって予約されているものに対するAngularの単なる識別子です。

$ rootScopeを使用してモジュールとコントローラー間で変数などを共有することは、一般的にベストプラクティスとは見なされないことに注意してください。JavaScript開発者は、変数を共有することでグローバルスコープの「汚染」を回避することについて話します。これは、同じ名前の変数が他の場所で使用されると、開発者が$ rootScopeですでに宣言されていることに気付かずに衝突する可能性があるためです。これの重要性は、アプリケーションのサイズとそれを開発しているチームとともに増加します。理想的には、$ rootScopeには定数または静的変数のみが含まれ、アプリ全体で常に一貫していることを目的としています。モジュール間でデータを共有するより良い方法は、別のトピックであるサービスとファクトリーを使用することかもしれません!


2

どちらもJavaスクリプトオブジェクトであり、その違いを以下の図に示します。

ここに画像の説明を入力してください

NTB:
最初の角度付きアプリケーションは、$ scopeで任意のモデルまたは関数のプロパティを検索しようとします。$ scopeでプロパティが見つからない場合は、上位階層の親スコープで検索します。プロパティがまだ上位階層に見つからない場合、angularは$ rootscopeで解決を試みます。


1

John PapaのAngularJS Styleguideのような新しいスタイルは、$scope現在のページのプロパティを保存するために使用すべきではないことを示唆しています。代わりにcontrollerAs with vm、ビューがコントローラーオブジェクト自体にバインドするアプローチを使用する必要があります。次に、controllerAs構文を使用するときに、これにキャプチャ変数を使用します。ViewModelを表すvmなどの一貫した変数名を選択します。

$scopeただし、監視機能にはまだが必要です。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.