如何包含< tr>角度指令中的元素（transclude）？

问题描述

我想包含< tr> 和< td> ，显然我不能这么做与指令。它会一直忽略< td> 或< td> ，就好像它们不存在一样。这是我想要完成的：

 < my-table> 
< tr> 
< td> hello< / td> 
< td>世界< / 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'
}; 
}）; b 
 
 
 $ b $ my $ table $ $ p> < table ng-transclude> 
 
< / table> 
  

上面的代码导致：



 < my-table class =ng-isolate-scope>< table ng-transclude => 
 
 hello<  -  no< tr>也没有< td>这里只是纯文本
 world 
 
< / table>< / my-table> 
  

例如：

解决方案

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



 < my-table> 
< table> 
< tr> 
< td> hello< / td> 
< td>世界< / td> 
< / tr> 
< / table> 
< / my-table> 
  

然后您就可以访问 tbody






$ b $ > link：function（scope，element，attrs，ctrls，transclude）{
var html = transclude（）;
element.find（'table'）。append（html [1] .firstElementChild）;



或使用 ng-transclude


I want to include <tr> and <td> and apparently I can't do that with directive. It keeps ignoring <td> or <td> as if they don't exists. here's what I trying to accomplish:

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

Here's the 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>

the code above resulted in:

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

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

</table></my-table>

example : PLUNKR

解决方案

It's not a transclude problem. It's a problem with invalid html, because <tr> without a table is invalid. So angular gets from a browser text, not DOM elements. So you need to have <table> tag inside an html:

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

Then you'll be able to get access to tbody element created by a browser along with tr's in link function and process it:

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

or use ng-transclude in your template as you did. However, I may presume that you'll want to reuse the transcluded part later, so accessing it in link function makes more sense to me.

这篇关于如何包含< tr>角度指令中的元素（transclude）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！