我怎样才能把一个表中的指令？ [英] How can I place directives in a table?

查看：114
本文介绍了我怎样才能把一个表中的指令？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图创建指令表内，与angularjs。我一般能得到它的工作，但如果我试图把自定义元素（在我的jsfiddle，＆LT;人/＆GT; ）的表内，浏览器通常趋向于拉它的表，prePEND的元素。

http://jsfiddle.net/drewsonne/WSnyZ/16/

我期待：

＆LT; D​​IV NG-应用=MyApp的阶级=NG-范围＆GT;
    ＆LT;人们类=NG-范围＆GT;
        ＆LT;表＆gt;
            ＆LT; THEAD＆GT;＆LT; TR＆GT;＆LT;第i个姓名和LT; /第i个百分位＆GT;年龄＆LT; /第i＆LT; / TR＆GT;＆LT; / THEAD＆GT;
            ＆LT;＆TBODY GT;
                ＆LT;个人信息=personJohn级=NG-分离范围的NG-NG范围结合＆GT;
                    ＆所述; TR＆GT;＆下; TD＆GT;约翰＆下; / TD＆GT;＆下; TD→10＆下; / TD＆GT;＆下; / TR＆GT;
                ＆LT; /人＆GT;
                ＆LT;个人信息=personSally级=NG-分离范围的NG-NG范围结合＆GT;
                    ＆所述; TR＆GT;＆下; TD＆GT;萨利＆下; / TD＆GT;＆下; TD＆GT; 20℃; / TD＆GT;＆下; / TR＆GT;
                ＆LT; /人＆GT;
            ＆LT; / TBODY＆GT;
        ＆LT; /表＆gt;
    ＆LT; /人＆GT;
    ＆LT;个人信息={名称：'弗雷德'，年龄：30}级=NG-分离范围的NG-NG范围结合＆GT;
        ＆所述; TR＆GT;＆下; TD＆GT;佛瑞德＆下; / TD＆GT;＆下; TD＆GT; 30℃; / TD＆GT;＆下; / TR＆GT;
   ＆LT; /人＆GT;
＆LT; / DIV＆GT;

但我发现：

＆LT; D​​IV NG-应用=MyApp的阶级=NG-范围＆GT;
    ＆LT;人们类=NG-范围＆GT;
        ＆LT;个人信息=personJohn级=NG-分离范围的NG-NG范围结合＆GT;
            John10
        ＆LT; /人＆GT;
        ＆LT;个人信息=personSally级=NG-分离范围的NG-NG范围结合＆GT;
            Sally20
        ＆LT; /人＆GT;
        ＆LT;表＆gt;
            ＆LT; THEAD＆GT;＆LT; TR＆GT;＆LT;第i个姓名和LT; /第i个百分位＆GT;年龄＆LT; /第i＆LT; / TR＆GT;＆LT; / THEAD＆GT;
            ＆LT;＆TBODY GT;＆LT; / TBODY＆GT;
        ＆LT; /表＆gt;
    ＆LT; /人＆GT;
    ＆LT;个人信息={名称：'弗雷德'，年龄：30}级=NG-分离范围的NG-NG范围结合＆GT;
        Fred30
    ＆LT; /人＆GT;
＆LT; / DIV＆GT;

问：

是否有可能将一个表内的自定义元素，或这东西，浏览器只是蒸汽辊？

注：

我在拱动机是让我能有这样的：

＆LT;同期资讯=数据＆GT;＆LT; /年＆GT;

该模板是这样的：

＆LT;＆每年GT;
    ＆LT;表NG-重复=年度数据＆GT;
        ＆LT; THEAD＆GT;＆LT; TR＆GT;＆LT;第i个姓名和LT; /第i个百分位＆GT;价值＆LT; /第i＆LT; / TR＆GT;＆LT; / THEAD＆GT;
        ＆LT;＆TBODY GT;
        ＆所述; TR＆GT;百分位列跨度= 2 - {{year.name}}＆下; /第i＆下; / TR＆GT;
        ＆LT;季NG重复=季度year.quarters＆GT;
            ＆所述; TR＆GT;＆下;第i {{quarter.name}}＆下; /第i＆下; / TR＆GT;
            ＆LT;当月＆GT;
                ＆所述; TR＆GT;＆下;第i {{month.name}}＆下; /第i＆下; / TR＆GT;
                ＆LT; TR NG重复=天month.days＆GT;
                    ＆所述;第i {{day.name}}＆下; /第i
                    ＆所述;第i {{day.value}}＆下; /第i
                ＆LT; / TR＆GT;
            ＆LT; /月＆GT;
        ＆LT; /季＆GT;
        ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;
＆LT; /年＆GT;

这使得这样的：

＆LT;表＆gt;
        ＆LT; THEAD＆GT;＆LT; TR＆GT;＆LT;第i个姓名和LT; /第i个百分位＆GT;价值＆LT; /第i＆LT; / TR＆GT;＆LT; / THEAD＆GT;
        ＆LT;＆TBODY GT;
            ＆所述; TR＆GT;百分位列跨度= 2 - ; 2013＆下; /第i＆下; / TR＆GT;
            ＆LT; TR＆GT;＆LT;第i季度1 LT; /第i＆LT; / TR＆GT;
            ＆LT; TR＆GT;＆LT;第i二月和LT; /第i＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                ＆LT; TD＆GT; 01/02/2013＆LT; / TD＆GT;
                ＆LT; TD＆GT; $ 12 LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                ＆LT; TD＆GT; 05/02/2013＆LT; / TD＆GT;
                ＆LT; TD＆GT; $ 15℃; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                ＆LT; TD→10/02/2013＆LT; / TD＆GT;
                ＆LT; TD＆GT; $ 17 LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT;表＆gt;
        ＆LT; THEAD＆GT;＆LT; TR＆GT;＆LT;第i个姓名和LT; /第i个百分位＆GT;价值＆LT; /第i＆LT; / TR＆GT;＆LT; / THEAD＆GT;
        ＆LT;＆TBODY GT;
            ＆所述; TR＆GT;百分位列跨度= 2 - ; 2013＆下; /第i＆下; / TR＆GT;
            ＆LT; TR＆GT;＆LT;第i季度2'; /第i＆LT; / TR＆GT;
            ＆LT; TR＆GT;＆LT;第i个月和LT; /第i＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                ＆LT; TD＆GT 01/04/2013＆LT; / TD＆GT;
                ＆LT; TD＆GT; $ 18 LT; / TD＆GT;
            ＆LT; / TR＆GT;
            ＆LT; TR＆GT;＆LT;第i个月和LT; /第i＆LT; / TR＆GT;
            ＆所述; TR＆GT;
                ＆LT; TD＆GT 01/05/2013＆LT; / TD＆GT;
                ＆LT; TD＆GT; $ -78℃; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
＆LT; /表＆gt;


解决方案

如果你小心使用有效的表元素和依靠类似属性的指令，它似乎只是罚款工作： http://jsfiddle.net/Tz83w/1/ 

 '＆LT; TR NG重复=数据D信息=D＆GT;＆LT; / TR＆GT;'
...
.directive（'信息'，函数（）{
返回{
    限制：'A'，
...
模板：'＆LT; TR＆GT;＆LT; TD＆GT; {{info.name}}＆LT; / TD＆GT;＆LT; TD＆GT; {{info.Age}}＆LT; / TD＆GT;＆LT; / TR＆GT;'

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屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆