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要素内のコントローラも通常と同じように定義することができます。
独自の部品をお手軽に作れて大変便利です。