AngularJSのデータバインディングのディレクティブの概要についてまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
１Wayデータバインディング
・１Wayデータバインディングの設定をすると、スクリプト内のデータモデルに設定した変数の値がHTML内の関連付けられた要素に即座に反映される。
・1Wayデータバインディングを利用するには、二重波括弧{{…}}を使用するか、ng-bind、ng-bind-templateディレクティブを使用する。
・{{…}}の方が簡単に記述できるので、通常はこちらを使用する。
ng-bindは一つのデータバインディングしか利用できないので、二つ以上ある場合はng-bind-templateディレクティブを使用する必要がある。
●使用例
下記のようにスクリプトで$scopeサービスを使って変数に値を設定すると、設定した値がHTMLの要素にバインディングされ、HTMLに値が表示される。
（スクリプト）
$scope.country = “日本”;
$scope.gender = “男性”;
（HTML）
私は{{country}}在住の{{gender}}です
<div>私は<span ng-bind=”country”></span>在住です。</div>
<div>ng-bind-template：私は{{country}}在住の{{gender}}です。</div>
※二重波括弧の文字を表示したい場合は？
AngularJSでは、二重波括弧は１Wayデータバインディングとして解釈されてしまうため、そのままでは文字として表示する事が出来ない。
表示する場合は、下記のようにng-non-bindableディレクティブを使う。
<div ng-non-bindable>二重波括弧{{…..}}を表示するには、ng-non-bindableを使用。</div>
・1Wayデータバインディングを利用するには、二重波括弧{{…}}を使用するか、ng-bind、ng-bind-templateディレクティブを使用する。
・{{…}}の方が簡単に記述できるので、通常はこちらを使用する。
ng-bindは一つのデータバインディングしか利用できないので、二つ以上ある場合はng-bind-templateディレクティブを使用する必要がある。
●使用例
下記のようにスクリプトで$scopeサービスを使って変数に値を設定すると、設定した値がHTMLの要素にバインディングされ、HTMLに値が表示される。
（スクリプト）
$scope.country = “日本”;
$scope.gender = “男性”;
（HTML）
私は{{country}}在住の{{gender}}です
<div>私は<span ng-bind=”country”></span>在住です。</div>
<div>ng-bind-template：私は{{country}}在住の{{gender}}です。</div>
※二重波括弧の文字を表示したい場合は？
AngularJSでは、二重波括弧は１Wayデータバインディングとして解釈されてしまうため、そのままでは文字として表示する事が出来ない。
表示する場合は、下記のようにng-non-bindableディレクティブを使う。
<div ng-non-bindable>二重波括弧{{…..}}を表示するには、ng-non-bindableを使用。</div>
２Wayデータバインディング
・１WayデータバインディングではスクリプトからHTMLの要素へ、という方向だが、２WayデータバインディングではHTMLの要素からスクリプトへ反映させ、双方向に同期させることも出来る。
この場合は、ng-modelディレクティブを使用する。ユーザーがデータを入力できるHTML要素と一緒に使用する必要があるので、input、texterea、select要素などの属性に指定して使用する。
●使用例
下記例では、nameを２Wayデータバインディングとして設定してあるので、ユーザーが入力した値が即座に上の行の「私の名前は・・」の部分に表示される。
（スクリプト）
$scope.name = “初期値”;
（HTML）
<div>私の名前は{{name}}です。</div>
名前:<input ng-model=”name” />
デモとコードサンプルはこちら。
この場合は、ng-modelディレクティブを使用する。ユーザーがデータを入力できるHTML要素と一緒に使用する必要があるので、input、texterea、select要素などの属性に指定して使用する。
●使用例
下記例では、nameを２Wayデータバインディングとして設定してあるので、ユーザーが入力した値が即座に上の行の「私の名前は・・」の部分に表示される。
（スクリプト）
$scope.name = “初期値”;
（HTML）
<div>私の名前は{{name}}です。</div>
名前:<input ng-model=”name” />
デモとコードサンプルはこちら。