Transclude在角指令把元素一个单独的“跨度”内 [英] Transclude in Angular directive putting elements inside a single 'span'

问题描述

下面是我的指令：

myapp.directive('envtable',  function () {
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    template: '<table class="table" ng-transclude></table>'
};
});

这是我如何使用它在HTML中（使用引导CSS）

This is how i use it in html (using bootstrap css)

<envtable>
    <tr>
      <td>OS</td>
      <td>{{env.osName}}</td>
    </tr>
    <tr>
      <td>OS Version</td>
      <td>{{env.osVersion}}</td>
    </tr>
  </envtable>

不过，code生成这个样子的镀铬中：

However, the code generated looks like this in chrome:

<table class="table" ng-transclude=""><span class="ng-scope ng-binding">

      OS
      Windows 8


      OS Version
      6.2

  </span></table>

正如你所看到的，角不理我所有的 TR / TD 标签，并把内容在一个span元素。为什么会出现这种情况？

As you can see, Angular just ignored all my tr/td tags and put the contents in a single span element. Why is this happening?

顺便说一下，作为一个实验，我想只用transcluded P 标记中的envtable代替 TR \\ TD 标签，并在这种情况下角只是增加了一个 NG-范围类的<​​code> p 标记。那么，为什么它搞砸了这些TR / TD标签？

Btw, as an experiment, i tried using just a transcluded p tag in the envtable instead of the tr\td tags and in that case angular just adds a ng-scope class to the p tag. So why does it screw up these tr/td tags?

推荐答案

原来，这一点也适用限制：'A'

<table envtable>
    <tr>
        <td>OS</td>
        <td>{{env.osName}}</td>
    </tr>
    <tr>
        <td>OS Version</td>
        <td>{{env.osVersion}}</td>
    </tr>
</table>

<大骨节病> 演示

这篇关于Transclude在角指令把元素一个单独的“跨度”内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！