別のカスタムディレクティブを呼び出す角カスタムディレクティブ

Question

カスタムディレクティブを使用してヘッダー、メニュー、フッター、および選択したページを構成できる角度フレームワークを開発しています。この要件を満たすには、ある時点で次のことが必要です。私はネット上の例を見てきましたが、実際にそれをうまく説明していません。

最初のカスタムディレクティブのtemplateUrlを、別のカスタムディレクティブを呼び出すテンプレート属性に置き換える必要があります。

次のコードはtemplateUrlで正常に動作します。

angular.module("app",[]); 
angular.module("app").controller("productController", ['$scope', function ($scope) { 


}]); 

angular.module("app").directive("tmHtml", function() { 
    return { 
     transclude: false, 
     scope: { 
     }, 
     controller: "productController", 
     templateUrl: "/templates/HideShow.html" 
    }; 
}); 

しかし、私は上記のコードを次のように変更します。私は自分のカスタムディレクティブtmHtmlが別のカスタムディレクティブを呼び出すように変更しています。それは働いていない

angular.module("app").directive("hideShow", function() { 

    return { 
     tempateUrl: "/templates/HideShow.html" 
    }; 

}); 

次のようにhideShowため

angular.module("app").directive("tmHtml", function() { 
     return { 
      transclude: false, 
      scope: { 
      }, 
      controller: "productController", 
     template: ``<hideShow></hideShow>`` 
     }; 
    }); 

新指令が書かれています。私はここで何かを逃していることを理解する。私は見つけることができませんでした。

Answer 1

でのように、そこに蛇のケースを使用する必要があります。

var app = angular.module('plunker', []); 

app.controller('productController', function($scope) { 

}); 

app.directive("hideShow", function() { 

    return { 
    templateUrl: "hideshow.html" 
    }; 

}); 


app.directive("tmHtml", function() { 
    return { 
    transclude: false, 
    scope: {}, 
    controller: "productController", 
    template: "<hide-show></hide-show>" 
    }; 
}); 

問題は、あなたのhideShowディレクティブでtemplateUrlのスペルです。

デモ：http://plnkr.co/edit/TaznOeNQ7dM9lyFgqwCL?p=preview

Answer 2

がcontrollerAsを使用してコントローラを定義してみ助ける感謝：

angular.module("app").directive("tmHtml", function() { 
    return { 
     transclude: false, 
     scope: { 
     }, 
     controllerAs: "productController", 
     templateUrl: "/templates/HideShow.html" 
    }; 
}); 

Answer 3

angular.module("app").directive("tmHtml", function() { 
     return { 
      transclude: false, 
      scope: { 
      }, 
      controller: "productController", 
     template: ``<hideShow></hideShow>`` 
     }; 
    }); 

は属性template下

angular.module("app").directive("tmHtml", function() { 
     return { 
      transclude: false, 
      scope: { 
      }, 
      controller: "productController", 
     template: "<hide-show></hide-show>" 
     }; 
    }); 

に置き換える必要があり、あなたは、HTMLを追加します。だから、あなたはまだ、コードの作業HTMLファイル

Answer 4

あなたの最初のディレクティブは、あなたobserveeventually scoped属性を有することができます。

次に、2番目のディレクティブをラップすることがあります。必要に応じて、あなたの指示は親と子供としてcommunicatesになるかもしれません。