在 Angular 指令中嵌入将元素放在单个“跨度"中 [英] 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 中使用它的方式(使用 bootstrap 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>

但是，生成的代码在 chrome 中是这样的:

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>

如您所见，Angular 只是忽略了我所有的 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?

顺便说一句，作为一个实验，我尝试在 envtable 中只使用一个嵌入的 p 标签而不是 tr\td 标签，在这种情况下，angular 只添加了一个 ng-scope 类到 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?

推荐答案

事实证明这适用于 restrict: 'A'

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

演示

这篇关于在 Angular 指令中嵌入将元素放在单个“跨度"中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！