表格组件中的角度表格行组件

Question

我有一个表组件，我想从中创建表行组件作为子组件。

var documentsController = function () {};

var documentsComponent = {
   template: '<div class="col-lg-12 col-md-12 tableDataContainer">' +
          '  <table class="table">' +
          '    <thead>' +
          '      <tr>' +
          '        <td>Name</td>' +
          '        <td>Document Type</td>' +
          '      </tr>' +
          '    </thead>' +
          '    <tr ng-repeat="document in vm.documents">' +
          '      <document document="document"></document>' +
          '    </tr>' +
          '  </table>' +
          '</div>',
   controller: documentsController,
   controllerAs: 'vm',
   bindings: {
      documents: '<'
   }
};

这是我的表行组件：

module.component('documents', documentsComponent);

var documentController = function () {
};

var documentComponent = {
    template:
            '  <td>fl ={{vm.document}}</td>' +
            '  <td>{{document.Name}}</td>',
    controller: documentController,
    replace: true,
    controllerAs: 'vm',
    bindings: {
        document: '<'
    }
};

module.component('document', documentComponent);

问题是标记不正确。该文档位于表格之外：

<div class="col-lg-12 col-md-12 tableDataContainer">  
    <document document="document" class="ng-isolate-scope">
        <tr>
            <td class="ng-binding">fl =</td>  
            <td class="ng-binding"></td>
        </tr>
        </document>
    <table class="table">
        <thead>
            <tr>
                <td>Name</td>
                <td>Document Type</td>      
            </tr>
        </thead>
        <tbody><!-- ngRepeat: document in vm.documents -->
        <tr ng-repeat="document in vm.documents" class="ng-scope">
        </tr>
        <!-- end ngRepeat: document in vm.documents -->  
        </tbody>
        </table>
        </div>

此外，该文档没有传递到行组件，我不知道为什么。

Answer 1

有点晚了，但我希望它仍然对某人有帮助。因为任何不是 atd或标签th内的tr内容都是“太”无效的 html，你的浏览器只会将其丢弃。

试试这个（没有角度或任何可能干扰结果的东西）：

<table>
 <tbody>

  <tr>
   <td>td in row 1</td>
   <div>div in row 1</div>
  </tr>

  <tr>
   <td>td in row 2</td>
   <div>div in row 2</div>
  </tr>

 </tbody>
</table>

当您添加行时，将会td出现在表格内，但div浏览器将将 移至表格外部（如果是 chrome，则为之前）。甚至在 Angular 有机会解析 html 之前。

作为解决方法，您可以使用带有 , 的指令restrict: 'A'和如下模板：

<tr ng-repeat="document in vm.documents" document="document">
</tr>