English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AnjularJSの$scopeと$rootScopeの違いのまとめ

一言でまとめると:

     $rootScopeはグローバルなスコープに対して有効です

     $scopeは現在のcontrollerのスコープにのみ有効です

以下の例を使って、先ほどの主張を証明します:

モジュール名がmyAppのモジュールを定義します

var myApp = angular.module('myApp', []);

oneControllerとtwoControllerの両方のcontrollerを作成します

oneControllerは$scopeと$rootScopeを渡します

myApp.controller('oneController', ['$scope', '$rootScope', function ($scope, $rootScope) {
 // 局部的変数は、oneController内のみで表示されます
 $scope.one_language = 'Python';}}
 // グローバルの変数はすべて呼び出すことができます
 $rootScope.language = 'Go';
});

twoControllerは$scopeのみを渡されます

myApp.controller('twoController', ['$scope', function ($scope) {
 // 局所の変数は、twoControllerのみで表示されます
 $scope.two_language = 'Java';
});

HTMLタグの内容

<span ng-app="myApp">
  <style>
    div{margin-top: 15px;border: 2px solid rebeccapurple;width: 400px;}
  </style>
  <div>
    <h3>私はグローバル変数language: {{ language}}</h3>
  </div>
  <div ng-controller="oneController">
    <h3>私はone_languageローカル変数: {{ one_language}}</h3>
  </div>
  <div ng-controller="twoController">
    <h1>twoController</h1>
    <h3>私はtwo_languageローカル変数: {{ two_language }}</h3>
    <h3>私はone_languageローカル変数: {{ one_language}}</h3>
    <h3>私はグローバル変数language: {{ language }}</h3>
  </div>
</span>

表示された結果

まとめ

これがこの記事の全ての内容です。上記のコードを慎重に見てください。これにより理解が深まります。何かご不明な点があれば、コメントを残してください。ありがとうございます、ナイアラチュートリアルのサポートに感謝します。

おすすめ