2

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

我有一个名为“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使用它作为一个元素之间的区别?

+1

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

+0

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

+0

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

回答

2

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

在你的榜样,你有:以上

<nj-body> 
    <tr> 

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

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

+0

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

0

当我看着你(碎)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的方式设计。

相关问题