AngularJS スコープ

スコープ（scope）は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>私の名前は{{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

自分で試してみる

スコープを理解する

いつでも現在処理しているスコープを理解することが重要です。

上記の2つの例では、スコープは1つだけありますので、スコープの理解には問題はありませんが、より大きなアプリケーションでは、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、それは ng-app HTML要素上で作成されたスコープの指示

rootScopeはアプリケーション全体で利用可能です。

もし特定の変数が現在のスコープとルートスコープ（rootScope）で同じ名前を持っている場合、アプリケーションは現在のスコープの変数を使用します。

インスタンス

コントローラーのスコープとrootScopeには「color」という名前の変数が存在します：

<body ng-app="myApp">
<p>rootScopeのお気に入りの色:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>コントローラのスコープのお気に入りの色:</p>
  <h1>{{color}}</h1>
</div>
<p>ルートスコープのお気に入りの色はまだ:</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>

自分で試してみる