我有一个表组件,我想从中创建表行组件作为子组件。
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>
此外,文档没有传递到行组件,我不知道为什么。
最佳答案
有点迟到的答案,但我希望它仍然可以帮助别人。因为 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>
关于angularjs - 表格组件中的 Angular 表格行组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36576270/