AngularJSのディレクティブとディレクティブの正規化について | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

AngularJSの開発者ガイドを読んでAAngularJSのディレクティブとディレクティブの正規化についてまとめました。

※目次をクリックすると目次の下部にコンテンツが表示されます。

１．ディレクティブとは？
２．ディレクティブの正規化の例

ディレクティブとは？

※参照
Developer Guide / Directives
　
・ディレクティブはDOM要素（属性、要素名、CSSクラス）のマーカーといえるもので、AngularJSのHTMLコンパイラ（$compileサービス）にDOM要素に対するある特定の振る舞いを付与するように指示したり、DOM要素とその子要素を変換するように指示したりします。
　
・Angularには、ngBind、ngModel、ngViewなどデフォルトで組み込まれているディレクティブが多数ありますがコントローラやサービスを作るのと同じように自分でディレクティブを定義することも出来ます。
　
●要素とディレクティブのマッチについて
　
例１）<input ng-model=”foo”>
<input>要素はngModelディレクティブにマッチします。
　
例２）<input data-ng:model=”foo”>
上記も<input>要素はngModelにマッチします。
　
●正規化
　
・Angularは要素のタグや属性名でどのディレクティブにマッチするか判断します。
　
・ディレクティブは、”ngModel”のようにcase-sensitiveでcamelCaseで正規化されます。
　
・HTMLはcase-insensitiveなので、ng-modelのように小文字の”-“区切りを使用します。
　
・正規化は下記のように行われます。
　
①属性や要素のフロントにある”x-“と”data-“を取り除く。
　
②:、-、_などで区切られた名前をcamelCaseに変換する。

ディレクティブの正規化の例

ディレクティブの正規化について実際にサンプルコードで確認してみます。
　
●サンプルコードの仕様
　
・テキストボックスにテキストを入力すると、即その下に入力したテキストが表示されるようにします。
　
・inputタグに入力されたテキストをコントローラ内のスコープ上の属性にバインドさせるのにngModelディレクティブを使用します。
　
・HTML要素内で指定したテキストを置換するのにngBindディレクティブを使用します。
　
・HTML内で指定するngBindディレクティブは正規化されるので、ng-bind以外にもng:bind、ng_bind、data-ng-bind、x-ng-bindと指定しても正しく処理されます。
　
・スタイルは、ブートストラップを使って設定してみました。
　
●サンプルコード
　

（HTML）
<!doctype html>
<html ng-app="docsBindExample">
  <head>
    <meta charset="utf-8">
    <title>AngularJS-Bootstrap</title>
    <script src="js/angular.min.js"></script>
    <script src="js/docsBindExample.js"></script>
    <script src="js/ui-bootstrap-tpls-0.9.0.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="Ctrl1">
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label class="col-sm-2  control-label">入力欄</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" ng-model='name'>
        </div>
      </div>
    </form>
    <hr/>
    <div class="col-sm-12">
      <div class="well">
        <span ng-bind="name"></span> <br/>
        <span ng:bind="name"></span> <br/>
        <span ng_bind="name"></span> <br/>
        <span data-ng-bind="name"></span> <br/>
        <span x-ng-bind="name"></span> <br/>
      </div>
    </div>
    </div>
  </body>
</html>
　
（"js/docsBindExample.js"）
angular.module('docsBindExample', [])
  .controller('Ctrl1', function Ctrl1($scope) {
    $scope.name = 'ここにテキストを入力すると下に表示されます。';
  });

関連記事の目次

AngularJS

AngularJSの特徴、仕組み

ビルトインディレクティブ

サービス

カスタムディレクティブ

WordPressで使用