カテゴリー別アーカイブ: 双方向データバインディング

フォーム入力でAngularJSの基本を少し習得 2

昨日の続き.

昨日の記事に書いたように, フォームの入力を即座にモデルに反映するだけであれば, コントローラーが不要です.

しかし, もう少し複雑な処理, 制限文字数を超えたら指定のclass属性を付加する, placeholder属性に対応していないブラウザでplaceholderを実装する…

といった場合, コントローラーを作成することになります.

コントローラーの作成や, ディレクティブに関しては高度なことではないので, Webサイトやテキストを参考にしていただきたいですが,
重要な点は, 同じコントローラーを作成するといっても,

従来のようにDOMを取得してイベントリスナーを記述するというスタイルとは異なります.

従来であれば, 以下のようにDOMの操作がメインでした.

  • イベントリスナーを設定するDOMを取得
  • イベントリスナーで更新対象のDOMを取得
  • DOMに対して何かする

ところが, AngularJSのコントローラーでは,

  • ディレクティブによって, DOMの取得が必要がない
  • コントローラーでも, モデル (データ) の更新に集約できる
  • 双方向データバインディングにより, コントローラーでモデルを更新すれば, 即時にビューに反映される

この, イベント系のディレクティブを記述するのは, JavaScriptが世に出始めた頃のHTMLの属性としてイベントハンドラを記述することに似ています.

そして, AngularJSを象徴する機能である, 双方向データバインディングによって, ビューが更新 (ユーザーの入力など) されればモデルが更新され, モデルを更新 (コントローラー) すればビューが更新されるというなんとも素敵なことをやってのけてくれるのです.