使用跨越時，元素和屬性指令有區別嗎？

我試圖做一個表格指令，將具有一些更高級的功能，但是當我編寫從我構建的基本版本遇到了我不明白的東西。使用跨越時，元素和屬性指令有區別嗎？

我有一個名爲「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

使用跨越時，元素和屬性指令有區別嗎？

回答

相關問題