複合コンポーネント (複数のトランスクルージョン ディレクティブ) の私の実装は、次のアイデアに基づいています。
- 1 つのディレクティブで $transclude 子コンポーネントをキャプチャする
- この子コンポーネントを別のディレクティブで出力する
ライブデモhttp://nickholub.github.io/angular-composite-component/#/
デモ ソース コードhttps://github.com/nickholub/angular-composite-component
ディレクティブ ソース コードhttps://github.com/nickholub/angular-composite-component/blob/master/app/directive/angular-composite-component.js
<div cs-composite>
<div cs-section="header">
Composite Component Header
</div>
<div cs-section="footer">
Composite Component Footer
<div>Random Value: {{randomValue}}</div>
<div>Percentage: {{percentage}}%</div>
</div>
</div>
コンテンツをキャプチャするディレクティブ
.directive('csSection', function () {
return {
transclude: 'element',
priority: 100,
require: '^csComposite',
link: function (scope, element, attrs, ctrl, $transclude) {
var directiveTransclude = {
id: attrs.csSection,
transclude: $transclude,
element: element
};
ctrl.registerTransclude(directiveTransclude);
}
};
})
コンテンツを出力するディレクティブ
.directive('csTransclude', function () {
return {
transclude: true,
link: function (scope, element, attrs) {
var id = attrs.csTransclude;
var directiveTransclude = scope.transcludes[id];
if (directiveTransclude) {
var selectedScope = scope.$new();
directiveTransclude.transclude(selectedScope, function (clone) {
element.append(clone);
});
}
}
};
})