我怎样才能把一个表中的指令? [英] How can I place directives in a table?
问题描述
我试图创建指令表内,与angularjs。我一般能得到它的工作,但如果我试图把自定义元素(在我的jsfiddle,<人/>
)的表内,浏览器通常趋向于拉它的表,prePEND的元素。
http://jsfiddle.net/drewsonne/WSnyZ/16/
我期待:
< DIV NG-应用=MyApp的阶级=NG-范围>
<人们类=NG-范围>
<表>
< THEAD>< TR><第i个姓名和LT; /第i个百分位>年龄< /第i< / TR>< / THEAD>
<&TBODY GT;
<个人信息=personJohn级=NG-分离范围的NG-NG范围结合>
&所述; TR>&下; TD>约翰&下; / TD>&下; TD→10&下; / TD>&下; / TR>
< /人>
<个人信息=personSally级=NG-分离范围的NG-NG范围结合>
&所述; TR>&下; TD>萨利&下; / TD>&下; TD> 20℃; / TD>&下; / TR>
< /人>
< / TBODY>
< /表>
< /人>
<个人信息={名称:'弗雷德',年龄:30}级=NG-分离范围的NG-NG范围结合>
&所述; TR>&下; TD>佛瑞德&下; / TD>&下; TD> 30℃; / TD>&下; / TR>
< /人>
< / DIV>
但我发现:
< DIV NG-应用=MyApp的阶级=NG-范围>
<人们类=NG-范围>
<个人信息=personJohn级=NG-分离范围的NG-NG范围结合>
John10
< /人>
<个人信息=personSally级=NG-分离范围的NG-NG范围结合>
Sally20
< /人>
<表>
< THEAD>< TR><第i个姓名和LT; /第i个百分位>年龄< /第i< / TR>< / THEAD>
<&TBODY GT;< / TBODY>
< /表>
< /人>
<个人信息={名称:'弗雷德',年龄:30}级=NG-分离范围的NG-NG范围结合>
Fred30
< /人>
< / DIV>
问:
是否有可能将一个表内的自定义元素,或这东西,浏览器只是蒸汽辊?
注:
我在拱动机是让我能有这样的:
<同期资讯=数据>< /年>
该模板是这样的:
<&每年GT;
<表NG-重复=年度数据>
< THEAD>< TR><第i个姓名和LT; /第i个百分位>价值< /第i< / TR>< / THEAD>
<&TBODY GT;
&所述; TR>百分位列跨度= 2 - {{year.name}}&下; /第i&下; / TR>
<季NG重复=季度year.quarters>
&所述; TR>&下;第i {{quarter.name}}&下; /第i&下; / TR>
<当月>
&所述; TR>&下;第i {{month.name}}&下; /第i&下; / TR>
< TR NG重复=天month.days>
&所述;第i {{day.name}}&下; /第i
&所述;第i {{day.value}}&下; /第i
< / TR>
< /月>
< /季>
< / TBODY>
< /表>
< /年>
这使得这样的:
<表>
< THEAD>< TR><第i个姓名和LT; /第i个百分位>价值< /第i< / TR>< / THEAD>
<&TBODY GT;
&所述; TR>百分位列跨度= 2 - ; 2013&下; /第i&下; / TR>
< TR><第i季度1 LT; /第i< / TR>
< TR><第i二月和LT; /第i< / TR>
&所述; TR>
< TD> 01/02/2013< / TD>
< TD> $ 12 LT; / TD>
< / TR>
&所述; TR>
< TD> 05/02/2013< / TD>
< TD> $ 15℃; / TD>
< / TR>
&所述; TR>
< TD→10/02/2013< / TD>
< TD> $ 17 LT; / TD>
< / TR>
< / TBODY>
< /表>
<表>
< THEAD>< TR><第i个姓名和LT; /第i个百分位>价值< /第i< / TR>< / THEAD>
<&TBODY GT;
&所述; TR>百分位列跨度= 2 - ; 2013&下; /第i&下; / TR>
< TR><第i季度2'; /第i< / TR>
< TR><第i个月和LT; /第i< / TR>
&所述; TR>
< TD&GT 01/04/2013< / TD>
< TD> $ 18 LT; / TD>
< / TR>
< TR><第i个月和LT; /第i< / TR>
&所述; TR>
< TD&GT 01/05/2013< / TD>
< TD> $ -78℃; / TD>
< / TR>
< / TBODY>
< /表>
如果你小心使用有效的表元素和依靠类似属性的指令,它似乎只是罚款工作: http://jsfiddle.net/Tz83w/1/
'< TR NG重复=数据D信息=D>< / TR>'
...
.directive('信息',函数(){
返回{
限制:'A',
...
模板:'< TR>< TD> {{info.name}}< / TD>< TD> {{info.Age}}< / TD>< / TR>'
I'm trying to create a directive inside a table, with angularjs. I can generally get it working, except if I try to put custom elements (in my jsfiddle, <person />
) inside a table, the browser generally tends to pull it out of the table, and prepend the element.
http://jsfiddle.net/drewsonne/WSnyZ/16/
I'm expecting:
<div ng-app="MyApp" class="ng-scope">
<people class="ng-scope">
<table>
<thead><tr><th>Name</th><th>Age</th></tr></thead>
<tbody>
<person info="personJohn" class="ng-isolate-scope ng-scope ng-binding">
<tr><td>John</td><td>10</td></tr>
</person>
<person info="personSally" class="ng-isolate-scope ng-scope ng-binding">
<tr><td>Sally</td><td>20</td></tr>
</person>
</tbody>
</table>
</people>
<person info="{name:'Fred',age:30}" class="ng-isolate-scope ng-scope ng-binding">
<tr><td>Fred</td><td>30</td></tr>
</person>
</div>
but I'm getting:
<div ng-app="MyApp" class="ng-scope">
<people class="ng-scope">
<person info="personJohn" class="ng-isolate-scope ng-scope ng-binding">
John10
</person>
<person info="personSally" class="ng-isolate-scope ng-scope ng-binding">
Sally20
</person>
<table>
<thead><tr><th>Name</th><th>Age</th></tr></thead>
<tbody></tbody>
</table>
</people>
<person info="{name:'Fred',age:30}" class="ng-isolate-scope ng-scope ng-binding">
Fred30
</person>
</div>
QUESTION:
Is it possible to place custom elements inside a table, or this something the browser will just steam roll?
Notes:
My over arching motivation is so that I could have something like:
<year info="data"></year>
which templates to something like this:
<year>
<table ng-repeat="year in data">
<thead><tr><th>Name</th><th>Value</th></tr></thead>
<tbody>
<tr><th colspan=2>{{year.name}}</th></tr>
<quarter ng-repeat="quarter in year.quarters">
<tr><th>{{quarter.name}}</th></tr>
<month>
<tr><th>{{month.name}}</th></tr>
<tr ng-repeat="day in month.days">
<th>{{day.name}}</th>
<th>{{day.value}}</th>
</tr>
</month>
</quarter>
</tbody>
</table>
</year>
which renders something like this:
<table>
<thead><tr><th>Name</th><th>Value</th></tr></thead>
<tbody>
<tr><th colspan=2>2013</th></tr>
<tr><th>Quarter 1</th></tr>
<tr><th>February</th></tr>
<tr>
<td>01/02/2013</td>
<td>$12</td>
</tr>
<tr>
<td>05/02/2013</td>
<td>$15</td>
</tr>
<tr>
<td>10/02/2013</td>
<td>$17</td>
</tr>
</tbody>
</table>
<table>
<thead><tr><th>Name</th><th>Value</th></tr></thead>
<tbody>
<tr><th colspan=2>2013</th></tr>
<tr><th>Quarter 2</th></tr>
<tr><th>April</th></tr>
<tr>
<td>01/04/2013</td>
<td>$18</td>
</tr>
<tr><th>May</th></tr>
<tr>
<td>01/05/2013</td>
<td>$78</td>
</tr>
</tbody>
</table>
If you are careful to use valid table elements and rely on something like attribute directives it seems to work just fine: http://jsfiddle.net/Tz83w/1/
'<tr ng-repeat="d in data" info="d"></tr>'
...
.directive('info', function () {
return {
restrict: 'A',
...
template: '<tr><td>{{info.name}}</td><td>{{info.Age}}</td></tr>'
这篇关于我怎样才能把一个表中的指令?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!