JavaScript (HTML5): AngularJS で共通コンポーネントの HTML を directive から呼び出す

サブテンプレートとしてナビゲーションやモーダルビュー、エントリーアイテムなどの共通化を行う場合はこれが使える。

<body ng-app="MyApp">
  <sub-template user="unko" />
</body>

sub-template タグを作った。区切りはハイフンで。
directive にするときは subTemplate とキャメルケースにする。

app.directive("subTemplate", function() {
  return {
    restrict: "E",
    replace: true,
    scope: {
        user: "=user"
    }
    templateUrl: "sub_template.html"
  };
});

replace: true しておくと、sub_template.html の中身が、呼び出しタグと置き換えされる。
しないと呼び出しタグの小階層に展開される。

パラメータとかを渡す場合は、上のように新たな scope を生成して渡すか、
scope: false (デフォルト)にして、このディレクティブが利用される場所の scope を利用できる。
共通コンポーネントにする場合は疎結合にすべきなのでスコープは作った方がよさそう。