AngularJS-Directiveの中で上書き可能な形でtemplate(templateUrl)を使う

AngularJSといえばangular-ui/bootstrapがかなり便利である。ui-bootstrapのイケてる点としては、各templateを自前のhtmlで上書き可能な点が一つあると思う。
僕もDirectiveを作るかなーと思ったときに、せっかくだからこの形式で作るかーと思い立ったのが始まり。

中身を見てみる

早速bootstrapの中身ではどうやって実装されているのか見てみる。ui-bootstrap-tpls.jsの3860行目あたり。

angular.module("template/accordion/accordion-group.html", []).run(["$templateCache", function($templateCache) {  
  $templateCache.put("template/accordion/accordion-group.html",
    "<div class=\"panel panel-default\">\n" +
    "  <div class=\"panel-heading\">\n" +
    "    <h4 class=\"panel-title\">\n" +
    "      <a class=\"accordion-toggle\" ng-click=\"toggleOpen()\" accordion-transclude=\"heading\"><span ng-class=\"{'text-muted': isDisabled}\">{{heading}}</span></a>\n" +
    "    </h4>\n" +
    "  </div>\n" +
    "  <div class=\"panel-collapse\" collapse=\"!isOpen\">\n" +
    "      <div class=\"panel-body\" ng-transclude></div>\n" +
    "  </div>\n" +
    "</div>");
}]);

アコーディオンのアコーディオングループをtemplateとして登録しているようだ。なるほど、$templateCacheにputしてやればいいんだな。と、そりゃそうか、ng-templateも$templateCacheに展開されて、必要なときにロードされる仕様であった。

参考に作ってみる

僕は基本的にhtmlはjade、jsはcoffeeで書いてしまうのだけど、coffeeの中でhtmlを書くとなるとjadeは使えない。だけれどヒアドキュメントが使えるのでピュアなjsで書くよりうん倍ましである。