angularjs - Is it possible to have nested transclusion in Angular using named slots? -
i have simple dialog directive uses optional multiple transclusion include custom headers , footers.
<div class="dialog" ng-show="showing"> <div class="dialog-header" ng-transclude="header"> <span class="dialog-close" ng-click="hide()">×</span> <span class="dialog-title" ng-transclude="title">{{title}}</span> </div> <div class="dialog-body" ng-transclude></div> <div class="dialog-footer" ng-transclude="footer"></div> </div> and have created several directives encompass wizards or tools i'd appear in dialog (or somewhere else...it modular, after all). here, include query directive.
<dialog dialog-title="query" showing="query.active"> <query></query> </dialog> i nest header or footer in query directive, so. notice dialog-footer element @ bottom.
<div> <div> <div> <span class="query-tab" ng-repeat="tab in query.tabs track tab.id" ng-click="query.activatetab(tab)" ng-class="{active : tab.query.active}">{{tab.label}}</span> </div> <div> <div class="tab-section" ng-repeat="tab in query.tabs track tab.id" ng-show="tab.query.active"> <div class="query-results-table-container"> <table> <tr><th class="query-header" ng-click="query.sort(tab.query.items, field)" ng-repeat="field in tab.query.fields">{{field.name}}<span ng-show="query.sortfield == field" ng-class="query.sortascending ? 'icon-arrow-up' : 'icon-arrow-down'"></span></th></tr> <tr ng-repeat="item in tab.query.items" ng-class="{even: $even}"><td ng-repeat="field in query.getfields(item.data, tab.query.fields) track $index">{{field}}</td></tr> </table> </div> </div> </div> </div> <div class="clear-floats"></div> <dialog-footer>{{query.message}}</dialog-footer> </div> i want dialog directive recognize named slot nested in query directive, cannot. possible transclude dialog-footer element nested in query element? possible "exclude" (move element outside of parent) dialog-footer element outside query element dialog element can recognize named slot, , transclude it?
is there simpler solution i'm not thinking about?
**i include text in footer element, example, content might far more complex, , isn't suitable attribute.
Comments
Post a Comment