表组件中的角度表行组件
表组件中的角度表行组件
提问于 2016-04-12 22:27:58
我有一个表组件，我想从它创建表行组件作为子组件。
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>另外，文档没有被传递到row组件，我不知道为什么。
回答 1
Stack Overflow用户
发布于 2016-11-08 20:27:53
回答得有点晚了，但我希望它仍然能帮助到一些人。因为任何在tr标记中不包含td或th的内容都是“太”无效的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36576270
复制相关文章
相似问题
腾讯云开发者
