~Linux、MySQLからAJAXまでAngularJSのデータバインディングのディレクティブの概要AngularJSのデータバインディングのディレクティブの概要についてまとめました。デモとコードサンプルはこちら。※目次をクリックすると目次の下部にコンテンツが表示されます。1.1Wayデータバインディング2.2Wayデータバインディング1Wayデータバインディング・1Wayデータバインディングの設定をすると、スクリプト内のデータモデルに設定した変数の値がHTML内の関連付けられた要素に即座に反映される。・1Wayデータバインディングを利用するには、二重波括弧{{...}}を使用するか、ng-bind、ng-bind-templateディレクティブを使用する。・{{...}}の方が簡単に記述できるので、通常はこちらを使用する。ng-bindは一つのデータバインディングしか利用できないので、二つ以上ある場合はng-bind-templateディレクティブを使用する必要がある。下記のようにスクリプトで$scopeサービスを使って変数に値を設定すると、設定した値がHTMLの要素にバインディングされ、HTMLに値が表示される。ng-bind=”country”></span>在住です。</div><div>ng-bind-template:私は{{country}}在住の{{gender}}です。</div>※二重波括弧の文字を表示したい場合は?AngularJSでは、二重波括弧は1Wayデータバインディングとして解釈されてしまうため、そのままでは文字として表示する事が出来ない。表示する場合は、下記のようにng-non-bindableディレクティブを使う。ng-non-bindable>二重波括弧{{.....}}を表示するには、ng-non-bindableを使用。</div>2Wayデータバインディング・1WayデータバインディングではスクリプトからHTMLの要素へ、という方向だが、2WayデータバインディングではHTMLの要素からスクリプトへ反映させ、双方向に同期させることも出来る。この場合は、ng-modelディレクティブを使用する。nameを2Wayデータバインディングとして設定してあるので、ユーザーが入力した値が即座に上の行の「私の名前は・・」の部分に表示される。“初期値”;(HTML)<div>私の名前は{{name}}です。/>デモとコードサンプルはこちら。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。WordPressモバイルバージョンに。