私には2つのディレクティブがあります。
angular.module('app').directive('directiveA', directiveA);
function directiveA(){
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'directiveA.html',
controller: function($scope){
$scope.test="test data";
}
};
}
そして2つ目:
angular.module('app').directive('directiveB', directiveB);
function directiveB(){
return {
restrict: 'E',
require: '^directiveA',
transclude: true,
scope: {},
templateUrl: 'directiveB.html',
link: function(scope, elem, attrs, directiveAController) {
console.log("directiveB linked");
}
};
}
ディレクティブ A の HTML:
<div>
<!-- something here -->
<div ng-transclude></div>
</div>
ディレクティブ B の HTML:
<div>{{test}}</div>
そして、私はそれらを次のように使いたい:
<directive-a>
<directive-b></directive-b>
</directive-a>
require と ng-transclude を使用して相互に通信させ、両方のテンプレートをレンダリングさせるにはどうすればよいですか? たとえば、directiveB テンプレートの directiveA からテスト変数を出力したいと思います。私はディレクティブとトランスクルージョンが初めてです。