Angular 指令 transclude <tr> 破坏布局答案

【问题标题】：Angular directive transclude <tr> breaks layoutAngular 指令 transclude <tr> 破坏布局
【发布时间】：2016-01-21 22:20:49
【问题描述】：

我正在尝试将表格行 (a) 嵌入 ng-repeat 循环中，以便在用户单击 (a) 时显示/隐藏另一个表格行 (b)。两个表行都在呈现，但是，<ng-transclude> 元素 - 需要在指令模板中包含 (a) 之前 (b)，这破坏了布局。如何在不破坏布局的情况下使用指令呈现两个表格行？

// 主模板

<tr id="a" campaign-item ng-if="vm.campaignData.length > 0" ng-repeat="campaign in vm.campaignData | orderBy:vm.sortBy:vm.sortReverse | filter:searchCampaigns track by $index" ng-click="vm.showCampaignPreview(campaign)">
    <td>{{ campaign.name }}</td>
    <td>{{ campaign.priority }}</td>
    <td>{{ campaign.status }}</td>
    <td>{{ campaign.creator }}</td>
    <td>{{ campaign.approver }}</td>
    <td>{{ campaign.release_date }}</td>
    <td>{{ campaign.expiration_date }}</td>
    <td><select ng-init="campaignOptions = vm.campaignOptions[0]" name="campaignOption" class="form-control" ng-model="campaignOptions" ng-options="campaign.name for campaign in vm.campaignOptions track by campaign.value"></select></td>
</tr>

// 指令

(function(){
'use strict';

angular.module('vsmsCampaignModule')
.directive('campaignItem', campaign)

    function campaign(){

        var directive = {
            link: link,
            restrict: 'EA',
            transclude: true,
            templateUrl: 'app/vsms/admin/campaign/campaign.tpl.html'
        };

        return directive;

        function link(scope, el, attr, ctrl, transclude) {
            // do something with clone compiled and linked
            // in child scope of directive's scope:
        }

    }

})();

//指令模板

<ng-transclude></ng-transclude>

<tr id="b">
    <td colspan="8">{{ campaign.description }}</td>
    <td colspan="8">
        <div class="row">
            <div class="col-lg-1">
                <ul>
                    <li ng-repeat="package in campaign.packages">
                        {{ package.name }}
                    </li>
                </ul>
            </div>
            <div class="col-lg-1">{{ campaign.policy }}</div>
            <div class="col-lg-1">{{ campaign.region }}</div>
            <div class="col-lg-1">
                <ul>
                    <li ng-repeat="vehicle in campaign.vehicles">
                        {{ vehicle.name }}
                    </li>
                </ul>
            </div>
        </div>
    </td>
</tr>

// 更新，我通过简单地使用 ng-repeat-start/end 解决了这个问题

<tr ng-class-odd="'odd'" ng-class-even="'even'" ng-if="vm.campaignData.length > 0" ng-repeat-start="campaign in vm.campaignData | orderBy:vm.sortBy:vm.sortReverse | filter:searchCampaigns track by campaign.id" ng-click="vm.showCampaignPreview(campaign)">
    <td>{{ campaign.name }}</td>
    <td>{{ campaign.priority }}</td>
    <td>{{ campaign.status }}</td>
    <td>{{ campaign.creator }}</td>
    <td>{{ campaign.approver }}</td>
    <td>{{ campaign.release_date }}</td>
    <td>{{ campaign.expiration_date }}</td>
    <td>
        <select ng-init="campaignOptions = vm.campaignOptions[0]" name="campaignOption" class="form-control" ng-model="campaignOptions" ng-options="campaign.name for campaign in vm.campaignOptions track by campaign.value">
        </select>
    </td>
</tr>
<tr class="campaign-preview" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat-end ng-show="vm.selectedCampaign == campaign.id">
    <td colspan="8">{{ campaign.description }}</td>
</tr>

【问题讨论】：

我高度怀疑您试图在另一个 tr 中渲染 tr，这不是有效的 HTML。
那是无效的 html ...。<table> 仅限于允许的孩子。你到底想做什么？
我基本上想将 tr (a) 嵌入到 tr (b) 之前的指令模板中，即用 tr (a) 替换 ng-transclude 元素。我尝试使用 replace: true 但我收到此错误：“指令模板必须只有一个根元素。”

标签： angularjs angularjs-directive angularjs-ng-repeat angularjs-ng-transclude

【解决方案1】：

我通过简单地使用 ng-repeat-start/end（参见上面的更新）而不是指令来解决了这个问题。

【讨论】：

【解决方案2】：

这需要您重新考虑一下您的指令，但您可以使用 ng-repeat-start 和 ng-repeat-end 在每次 ng-repeat 迭代时渲染多个 TRs，如下所示：

 <tr ng-repeat="vehicle in campaign.vehicles" 
     ng-click='vehicle.showDetails = !!!vehicle.showDetails'>
   <td> {{ vehicle.name }} </td>
 </tr>
 <tr ng-repeat-end ng-show='vehicle.showDetails'>
   <td> {{ vehicle.details }}
   </td>                        
 </tr>

【讨论】：