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

有点迟到的答案，但我希望它仍能帮助某人。因为td标记内的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，之前）。甚至在角度有机会解析html之前。

作为一种变通方法，您可以使用带restrict: 'A'的指令和这样的模板：

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

表组件中的角表行组件

1 个答案: