Question

我有一个简单的对话框指令，它使用可选的多重转换来包含自定义页眉和页脚。

<div class="dialog" ng-show="showing">
    <div class="dialog-header" ng-transclude="header">
        <span class="dialog-close" ng-click="hide()">&times;</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>

我已经创建了几个指令，其中包含我想要出现在对话框中的向导或工具（或者其他地方......毕竟它是模块化的）。在这里，我包含查询指令。

<dialog dialog-title="Query" showing="query.active">
    <query></query>
</dialog>

我想在查询指令中嵌套页眉或页脚，就像这样。注意底部的对话框页脚元素。

<div>
    <div>
        <div>
            <span class="query-tab" ng-repeat="tab in query.tabs track by 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 by 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 by $index">{{field}}</td></tr>
                    </table>
                </div>               
            </div>
        </div>
    </div>
    <div class="clear-floats"></div>
    <dialog-footer>{{query.message}}</dialog-footer>
</div>

我希望dialog指令识别嵌套在query指令中的命名槽，但它不能。是否可以转换嵌套在查询元素中的dialog-footer元素？是否可以“排除”（在其父项之外移动元素）以获取查询元素之外的对话框页脚元素，以便对话框元素可以识别其命名的插槽，并正确地转换它？

我有没有想到的更简单的解决方案？

**作为示例，我只在页脚元素中包含文本，但内容可能要复杂得多，并且不适合属性。

是否可以使用命名槽在Angular中进行嵌套转换？

0 个答案: