scope は、HTML（ビュー）と JavaScript（コントローラ）とのバインディング部分です。

scope は、利用可能なプロパティとメソッドを持つオブジェクトです。

Scope の使用方法は？

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>

Try it Yourself »

コントローラの $scope オブジェクトにプロパティを追加する場合は、ビュー（HTML）は、これらのプロパティへのアクセスを取得します。

ビューでは、接頭辞 $scope を使用しないで、{{carname}} のように propertyName だけで参照します。

Scope を理解する

次のような構成の AngularJS アプリケーションを考えてみましょう：

scope は、ビューとコントローラの両方で使用可能なプロパティとメソッドを持つ JavaScript オブジェクトです。

例

ビューで変更を行う場合は、モデルとコントローラが更新されます：

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

app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});

</script>

Try it Yourself »

Scope を確認してください

上の 2 つのには、1 つのスコープしかないので、scope を知ることに問題はありませんが、より大きいアプリケーションの場合、特定のスコープにのみアクセスできる HTML DOM セクションしかないかもしれません。

例

ng-repeat ディレクティブを扱う場合、各繰り返しは、現在の繰り返しオブジェクトにアクセスします：

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

app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

Try it Yourself »

各 <li> 要素は、現在の繰り返しのオブジェクト、この場合には、x を使用して参照される文字列へアクセスします。

ルート Scope

すべてのアプリケーションは、ng-app ディレクティブを含む HTML 要素で作成された scope である $rootScope を持っています。

現在の scope と rootScope に同じ変数名の変数がある場合、アプリケーションは現在の scope の変数を使用します。

例

変数名 "color" が、コントローラの scope と 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>

Try it Yourself »

AngularJS Scope

Scope の使用方法は？

例

Scope を理解する

例

Scope を確認してください

例

ルート Scope

例