我正在尝试制作一个具有一些更高级功能的表指令，但是当我编写要构建的基本版本时，我遇到了一些我不理解的东西。
我有一个名为“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
也许我不完全理解使用指令作为属性与使用它作为元素之间的区别？
最佳答案
您的指令不能作为元素运行的原因是浏览器在 Angular 运行之前渲染 HTML，并清除任何无效放置的元素。
在您的示例中，您有:
<nj-body>
<tr>
以上内容是无效的 HTML，因为只有 TABLE、THEAAD、TFOOT 或 TBODY 元素是 TR 的有效父元素。 这来自 HTML5 规范，如下所示: http://www.w3.org/TR/html-markup/tr.html
当浏览器获取此标记时，它会完全删除 TR 标记，因为它没有以有效的方式使用。然后级联到其下面的 TD，依此类推。
关于javascript - 使用嵌入时，元素指令和属性指令之间有区别吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27260140/