angular.jsのdirectiveでカスタム要素をつくる

directiveを使ってカスタム要素をつくるというのをやってみました。

http://docs.angularjs.org/guide/directive

restrict: "E",

restrictはdirectiveの種類で、'E'は要素を指します。他にも'A'や'C'があり、それぞれ属性とクラスを指します。デフォルトは'A'のようです。'AEC'と指定すれば全てにマッチするようです。

var template = ''
    + '<div class="user">'
    + '  <span class="user-id">{{user.id}}</span>'
    + ...

user要素を置き換えるテンプレートを文字列で組み立ててtemplateに渡していますが、 別のファイルに切り出して、templateUrlでそのファイルのurlを指定する方法もあります。

scope: { user: "=data" },

user要素内で使うデータをscopeで指定します。data属性で渡された値を、user要素内ではuserという名前で扱えます。

controller: function($scope){
    ...
}

user要素内のコントローラも通常と同じように定義することができます。

独自の部品をお手軽に作れて大変便利です。