时间戳

首页 > 解决方案 > Transclude 删除 tr 和 td 标签？

javascript - Transclude 删除 tr 和 td 标签？

问题描述

我有以下 angularjs 应用程序，但由于某种原因，删除了 tr 和 td 标签？

angular.module('transcludeExample', [])
  .directive('pane', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {
        title: '@'
      },
      replace: true,
      template: '<table><tbody ng-transclude></tbody></table>'
    };
  })
  .controller('ExampleController', ['$scope', function($scope) {}]);
td {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<div ng-controller="ExampleController">
  pre
  <pane>
    <tr>
      <td><strong>testtest</strong></td>
    </tr>
  </pane>
  post
</div>

标签： javascriptangularjs

解决方案

似乎浏览器忽略了这个 html 代码，因为<table>标签最初是缺失的（所以它只显示文本）：

 <tr>
  <td><strong>testtest</strong></td>
</tr>

我认为唯一的解决方案是移动ng-transclude到外部元素而不是拆分表标签。例如：jsfiddle 示例

推荐阅读