AngularJSカスタムディレクティブ内でコントローラを生成し、他のディレクティブで利用

AngularJSカスタムディレクティブ内でコントローラを生成し、他のディレクティブで利用するサンプルを作成しました。

デモとコードサンプルはこちら。
　

（１）サンプルコードの仕様

　
●カスタムディレクティブ　productTotal
　
・controller属性を使って商品リストの商品の合計金額を計算するupdateTotal関数を定義
　
●カスタムディレクティブ　productItem
　
・商品リストの各商品の名前、単価、個数を表示。
　
・個数はユーザーが変更可能で、個数変更時にproductTotalのupdateTotal関数関数を使って合計金額を更新する。
　

（２）サンプルコードの作成

　
１）商品リストの合計金額を計算するディレクティブ作成
　
・controller属性でupdateTotal関数を定義し、他のカスタムディレクティブによって合計金額を計算できるようにする。
　

demoApp.directive("productTotal", function () {
  return {
    scope: { total: "=productTotal", data: "=productData" },
    controller: function ($scope, $element, $attrs) {
      this.updateTotal = function() {
        var calc = 0;
        for (var i = 0; i 
　

２）各商品を表示するディレクティブを作成し、上記コントローラを利用

　
demoApp.directive("productItem", function () {
  return {
    template: "<td>{{item.name}}</td><td>{{item.price}}</td><td><input ng-model='item.quantity' /></td>",
    require: "^productTotal",
    link: function (scope, element, attrs, ctrl) {
      scope.$watch("item.quantity", function () {
        ctrl.updateTotal();
      });
    }
  }
});

　

①require属性

　

・このカスタムディレクティブが依存するディレクティブをrequire。

　

・"productTotal"という名前のディレクティブに依存し、このディレクティブの探索場所として親要素も含めるので"^"を指定します。

　

②link関数で他のディレクティブのコントローラを利用

　

link関数の４番目に引数を指定します。

　

この引数を使ってコントローラで定義したメソッドを実行できます。