使用跨越时，元素和属性指令有区别吗？

我试图做一个表格指令，将具有一些更高级的功能，但是当我编写从我构建的基本版本遇到了我不明白的东西。使用跨越时，元素和属性指令有区别吗？

我有一个名为“njTable”

当我使用它，因为它的工作原理的属性指令：

<body ng-app="tableTest"> 
<div ng-controller="mainCtrl as mc"> 
    <div></div> 
    <table nj-table> 
    <nj-head> 
     <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>State</th> 
     </tr> 
    </nj-head> 
    <nj-body> 
     <tr ng-repeat="person in mc.asyncList"> 
     <td>{{person.name}}</td> 
     <td>{{person.age}}</td> 
     <td>{{person.state}}</td> 
     </tr> 
    </nj-body> 
    </table> 
</div>

然而，当我使用完全相同的指令，作为一个元素它游：

<body ng-app="tableTest"> 
<div ng-controller="mainCtrl as mc"> 
    <div></div> 
    <nj-table> 
    <nj-head> 
     <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>State</th> 
     </tr> 
    </nj-head> 
    <nj-body> 
     <tr ng-repeat="person in mc.asyncList"> 
     <td>{{person.name}}</td> 
     <td>{{person.age}}</td> 
     <td>{{person.state}}</td> 
     </tr> 
    </nj-body> 
    </nj-table> 
</div>

这里是破Plunker：http://plnkr.co/edit/zkpPcJG1ZZ5XjORJOoy6?p=preview

这里是功能Plunker：http://plnkr.co/edit/9W56YRREyuR4ew2rgVUc?p=preview

也许我不完全了解使用指令作为属性VS使用它作为一个元素之间的区别？

来源

2014-12-02 njfife

你是说你不能使用角度指令创建自定义标签吗？如果这就是你所说的那是不正确的，我会一直制作自定义标签。 – njfife 2014-12-02 22:27:19

您可以使用Angularjs创建任何您想要的内容，例如> DID您检查当您使用指令作为你在你的返回中指定的“restrict：'E'”的元素？或者至少“限制：'EA'”？ – SoEzPz 2014-12-02 22:28:27

如果你看看Plunkr，你可以看到我做了 – njfife 2014-12-02 22:31:48

您的指令不能作为元素的原因是因为浏览器在Angular运行之前呈现HTML并清除任何无效放置的元素。

在你的榜样，你有：以上

<nj-body> 
    <tr>

是无效的HTML，因为只有一张桌子，THEAD，TFOOT或TBODY元素是TR的一个有效的父元素。这来自HTML5规范的可以在这里看到： http://www.w3.org/TR/html-markup/tr.html

当浏览器获得该标志，因为它不是一个有效的方式使用了它完全消除TR标签。然后级联到它下面的TD，等等。

来源

2014-12-02 23:46:35 Enzey

就是这样，谢谢你，我忽略了HTML错误，因为我认为angular一旦运行就会修复它 – njfife 2014-12-03 17:44:51

当我看着你（碎）plunker链接铬控制台被扔这个错误：

Error: error:tplrt 
Invalid Template Root 
Template for directive 'njTable' must have exactly one root element.

其链接到该angularjs页：

Angularjs Error Link

在最初的描述中， angularjs链接状态：

When a directive is declared with template (or templateUrl) and replace mode on, 
the template must have exactly one root element.

Pe也许这些描述可能更加明确，并且“恰好只有一个HTML根元素”。正如Enzey指出的那样，根元素必须是表元素，因为IT是任何HTML DOM中的th，td和tr的父元素，这就是为什么下面的HTML工作得很好，并且它说同样的事情：

<table class="table table-hover"> 
    <nj-head> 
    <tr> 
     <th>Name</th> 
     <th>Age</th> 
     <th>State</th> 
    </tr> 
    </nj-head> 
    <nj-body> 
    <tr ng-repeat="person in mc.asyncList"> 
     <td>{{person.name}}</td> 
     <td>{{person.age}}</td> 
     <td>{{person.state}}</td> 
    </tr> 
    </nj-body> 
</table>

你的思想工作，只是没有与HTML表元素，因为它始终是它的兄弟姐妹嵌套父。这是你的想法工作，但与Divs和跨度。

注意：我用一些CSS来模仿最初由Tbootstrap提供的表格外观。

<nj-table> 
    <nj-head> 
    <div> 
     <span class="tableHeader">Name</span> 
     <span class="tableHeader">Age</span> 
     <span class="tableHeader">State</span> 
    </div> 
    </nj-head> 
    <nj-body> 
    <div ng-repeat="person in mc.asyncList"> 
     <div class="tableItem">{{person.name}}</div> 
     <div class="tableItem">{{person.age}}</div> 
     <div class="tableItem">{{person.state}}</div> 
    </div> 
    </nj-body> 
</nj-table>

这里是工作plunker链接： Working Plunker Link

要完成你的答案 - 它不是一个Angularjs transclude问题，它只是HTML的方式设计。

来源

2014-12-03 16:22:56 SoEzPz

使用跨越时，元素和属性指令有区别吗？

回答

相关问题