如何在表格中放置指令? [英] How can I place directives in a table?
问题描述
我正在尝试使用 angularjs 在表中创建指令.我通常可以让它工作,除非我尝试将自定义元素(在我的 jsfiddle 中,<person/>
)放入表格中,浏览器通常倾向于将其从表格中拉出,并在元素前面加上.
http://jsfiddle.net/drewsonne/WSnyZ/16/
我期待:
<people class="ng-scope"><表格><thead><tr><th>姓名</th><th>年龄</th></tr></thead><person info="personJohn" class="ng-isolate-scope ng-scope ng-binding"><tr><td>约翰</td><td>10</td></tr></人><person info="personSally" class="ng-isolate-scope ng-scope ng-binding"><tr><td>莎莉</td><td>20</td></tr></人></tbody></人><person info="{name:'Fred',age:30}" class="ng-isolate-scope ng-scope ng-binding"><tr><td>弗雷德</td><td>30</td></tr></人>但我得到:
<people class="ng-scope"><person info="personJohn" class="ng-isolate-scope ng-scope ng-binding">约翰10</人><person info="personSally" class="ng-isolate-scope ng-scope ng-binding">莎莉20</人><表格><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody></tbody></人><person info="{name:'Fred',age:30}" class="ng-isolate-scope ng-scope ng-binding">弗雷德30</人>
问题:
是否可以将自定义元素放置在表格中,或者浏览器会自动滚动?
<小时>注意事项:
我的过度动机是为了让我可以有这样的事情:
<year info="data"></year>
哪些模板是这样的:
<table ng-repeat="数据中的年份"><thead><tr><th>名称</th><th>值</th></tr></thead><tr><th colspan=2>{{year.name}}</th></tr><季度 ng-repeat="季度年.季度"><tr><th>{{quarter.name}}</th></tr><月><tr><th>{{month.name}}</th></tr><tr ng-repeat="day in month.days"><th>{{day.name}}</th><th>{{day.value}}</th></tr></月></季度></tbody></年>呈现如下:
<thead><tr><th>名称</th><th>值</th></tr></thead><tr><th colspan=2>2013</th></tr><tr><th>第一季度</th></tr><tr><th>二月</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>
<表格><thead><tr><th>名称</th><th>值</th></tr></thead><tr><th colspan=2>2013</th></tr><tr><th>第二季度</th></tr><tr><th>四月</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> 解决方案 如果你小心地使用有效的表格元素并依赖属性指令之类的东西,它似乎工作得很好:http://jsfiddle.net/Tz83w/1/
'<tr ng-repeat="d in data" info="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屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆