スコープは、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つの例では、ので、あなたの範囲を知ることは問題ではないですが、大規模なアプリケーションのためにのみ特定のスコープにアクセスすることができますHTML DOM内のセクションが存在することができます。
例
扱う場合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に同じ名前を持っている場合、アプリケーションは現在のスコープ内のいずれかを使用します。
例
「色」という名前の変数は、コントローラの両方の範囲に及び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> »それを自分で試してみてください