如何使用角度js将表格行添加为模板

Question

我想动态地向表中添加一行.我想在几个表中重用该行.

我尝试使用指令和使用,ng-include但两个选项都没有像我预期的那样工作.

基本上,这就是我做的:

myapp.directive('myRow', function () {
    return {
        restrict : 'E',
        replace : true,
        scope : { mytitle : '@mytitle'},
        template : '<tr><td class="mystyle">{{mytitle}}</td></tr>' 
    }
});

并在HTML中:

<table>
    <tbody>
        <tr><td>data</td></tr>
        <my-row></my-row>
    </tbody>
</table>

该<tr>元素获得绘制但最终之外的<table>在DOM元素.

有没有一种简单的方法来使用angularjs包含表行？

Answer 1

您的问题是由于my-row内部存在自定义元素,因此您的html结构无效tbody.你只能在tr里面.因此,即使在angular有机会处理它之前,浏览器也会将指令元素抛出表中.因此,当angular处理指令时,它会处理表外的元素.

为了解决这个问题,请将您的指令更改为元素限制的属性限制指令.

   .directive('myRow', function () {
     return {
        restrict : 'A',
        replace : true,
        scope : { mytitle : '@mytitle'},
        template : '<tr><td class="mystyle">{{mytitle}}<td></tr>' 
     }

并用它作为: -

  <table>
    <tbody>
        <tr><td>data</td></tr>
        <tr my-row mytitle="Hello I am Title"></tr>
    </tbody>
  </table>

Plnkr