angularjs - 表格组件中的 Angular 表格行组件

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

有点迟到的答案，但我希望它仍然可以帮助别人。因为 tr 标签内的任何不是 td 或 th 的内容都是“太”无效的 html，您的浏览器会将其丢弃。

试试这个(没有 Angular 或任何可能干扰结果的东西):

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