2

我必须使用嵌入在指令中注入内容，该指令应用于页面上的 tbody 元素。我正在尝试将 transclude 应用到指令模板的 tr 元素上，但是浏览器现在以某种方式在 tr 元素上加倍 - 它必须在 transclude 运行之前自动将每个 td 列表包装到 tr 中。我怎样才能防止这种情况发生？

请注意：在这种情况下，我必须将其作为表格工作，因此请不要建议用 div 或其他元素替换表格。

模板： 

<td class="drawer" ng-show="showDrawer">
  DRAWER PLACEHOLDER
</td>

包括文件：

<tbody ng-repeat="p in ps
    drawer
    drawer-id="p.ID">
    <td class="p"><span>...</span></td>
    <td class="p"><span>...</span></td>
    ...
></tbody>

js：

drawer.directive('drawer', [function() {
  return {
    restrict: 'A',
    scope: {
      drawerId: '=' // pass in player id
    },
    transclude: true,
    templateUrl: openGlobals.paths.live.drawerTemplate,
    link: function (scope) {
    }
  }
}

结果：

<tbody ng-repeat="p in ps
    drawer
    drawer-id="p.ID">
    <tr ng-transclude>
        <tr ng-scope>
            <td class="p"><span>...</span></td>
            <td class="p"><span>...</span></td>
            ...
        </tr>
    </tr>
</tbody>

这怎么发生的？为什么有两个标签相互嵌套？

4

0 回答 0