AngularJSスコープ
スコープは、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
= "John Doe";
});
</script>
あなたの範囲を知る
いつでも、どのスコープを扱っているかを知ることが重要です。
上記の2つの例では、スコープは1つしかないため、スコープを知ることは問題ではありませんが、大規模なアプリケーションの場合、特定のスコープにのみアクセスできるセクションがHTMLDOMに存在する可能性があります。
例
ディレクティブを処理するとき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を含むHTML要素で作成されたスコープであるがあります。ng-app
rootScopeは、アプリケーション全体で使用できます。
変数が現在のスコープとrootScopeの両方で同じ名前を持っている場合、アプリケーションは現在のスコープの名前を使用します。
例
「color」という名前の変数は、コントローラーのスコープとrootScopeの両方に存在します。
<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>