Question

我想要包含<tr>和<td>，显然我无法通过指令来做到这一点。它一直忽略<td>或<td>，就好像它们不存在一样。这是我想要完成的事情：

<my-table>
   <tr>
     <td>hello</td>
     <td>world</td>
   </tr>
</my-table>

这是javascript：

angular.module('app', [])
.controller('Controller', ['$scope', function($scope) {

}])
.directive('myTable', function() {
   return {
     restrict: 'E',
     transclude: true,
     templateUrl: 'my-table.html'
   };
});

my-table.html：

<table ng-transclude>

</table>

上面的代码导致：

<my-table class="ng-isolate-scope"><table ng-transclude="">

   hello  <-- no <tr> nor <td> here just plain text
   world

</table></my-table>

示例：PLUNKR

Answer 1

这不是一个转移问题。这是无效html的问题，因为没有表的<tr>无效。所以angular来自浏览器text，而不是DOM元素。因此，您需要在html中包含<table>标记：

  <my-table>
  <table>
      <tr>
       <td>hello</td>
       <td>world</td>
     </tr>
  </table>
  </my-table>

然后，您将能够访问浏览器创建的tbody元素以及链接功能中的tr并处理它：

  link: function(scope,element,attrs,ctrls,transclude) {
    var html = transclude();
    element.find('table').append(html[1].firstElementChild);
  }

或像您一样在模板中使用ng-transclude。但是，我可能会假设你以后想要重复使用被转换的部分，所以在链接函数中访问它对我来说更有意义。

Answer 2

如果你想使用ng-trasclude

，你可以在之前的评论中添加一些类似的内容。

angular.module('app', [])
  .controller('Controller', ['$scope', function($scope) {

  }])
  .directive('myTable', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {
        'close': '&onClose'
      },
      templateUrl: 'my-dialog-close.html'
    };
  });

模板

的index.html

<my-table>
    <table>
     <tr>
       <td>hello</td>
       <td>world</td>
     </tr>
    </table>
  </my-table>

Plunker：https://plnkr.co/edit/u85h0sJL50k2gESfI6RT?p=preview

如何在angular指令（transclude）中包含元素？

2 个答案: