Html AngularJS ng-repeat 与表格内的自定义元素呈现奇怪
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18600710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS ng-repeat with custom element inside a table is rendering strangely
提问by ravishi
I'm trying to re-use a portion of my HTML view in multiple places. The portion I want to re-use is table cells in an HTML table. The problem is that my custom directive inside a ng-repeat is doing funny things. I have reproduced the problem on jsFiddle. There are two HTML tables in the jsFiddle. The first is ng-repeat with the table cells written in the view and the second is the table cells coming from a directive, my-element. Chrome dev tools report that the rendered HTML looks like this. Note that the custom element appears only once and is outside the table.
我正在尝试在多个地方重复使用我的 HTML 视图的一部分。我想重用的部分是 HTML 表格中的表格单元格。问题是我在 ng-repeat 中的自定义指令正在做一些有趣的事情。我已经在jsFiddle上重现了这个问题。jsFiddle 中有两个 HTML 表。第一个是 ng-repeat，表格单元格写在视图中，第二个是来自指令 my-element 的表格单元格。Chrome 开发工具报告呈现的 HTML 如下所示。请注意，自定义元素仅出现一次并且位于表格之外。
Rendered HTML
呈现的 HTML
<div ng-controller="MyCtrl" class="ng-scope">
table1
<table class="table table-hover">
<tbody><!-- ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
<td class="ng-binding">Name: Mike</td>
<td class="ng-binding">Age: 20</td>
</tr>
<tr ng-repeat="p in people" class="ng-scope">
<td class="ng-binding">Name: Peter S</td>
<td class="ng-binding">Age: 22</td>
</tr>
</tbody>
</table>
<br>table2
<my-element class="ng-binding">Name: Age: </my-element>
<table class="table table-hover">
<tbody>
<!-- ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
</tr>
<tr ng-repeat="p in people" class="ng-scope">
</tr>
</tbody>
</table>
</div>
Source HTML
源 HTML
<div ng-controller="MyCtrl">
table1
<table class="table table-hover">
<tr ng-repeat="p in people">
<td>Name: {{ p.name }}</td>
<td>Age: {{ p.age }}</td>
</tr>
</table>
<br/>table2
<table class="table table-hover">
<tr ng-repeat="p in people">
<my-element></my-element>
</tr>
</table>
</div>
Source JS
源代码
var app = angular.module('myApp', []);
app.directive('myElement', function () {
return {
restrict: 'E',
template: '<td>Name: {{ p.name }}</td><td>Age: {{ p.age }}</td>'
}
});
function MyCtrl($scope) {
$scope.people = [{
name: 'Mike',
age: 20
}, {
name: 'Peter S',
age: 22
}];
}
Please note the jsFiddle is a trivial example and common sense would lead to just not using directives at all. However, my target code has a much larger template that I want to re-use. I've tried using "ng-include" as well but the result is similar.
请注意 jsFiddle 是一个微不足道的例子，常识会导致根本不使用指令。但是，我的目标代码有一个更大的模板，我想重用它。我也试过使用“ng-include”，但结果是相似的。
回答by m59
<td>is known to behave strangely in directives like this. Instead, use a directive on the parent <tr>. Read more about this issue here: https://github.com/angular/angular.js/issues/1459
<td>众所周知，在这样的指令中表现得很奇怪。相反，在 parent 上使用指令<tr>。在此处阅读有关此问题的更多信息：https: //github.com/angular/angular.js/issues/1459
<table>
<tr ng-repeat="p in people" my-element></tr>
</table>
Here is how you can further improve your directive so that it is more re-usable.
以下是您可以如何进一步改进您的指令，使其更具可重用性。
app.directive('myElement', function () {
return {
scope: {
item: '=myElement'
},
restrict: 'EA',
template: '<td>Name: {{item.name}}</td><td>Age: {{item.age}}</td>'
};
});
and pass in the value of itemlike so:
并传入item这样的值：
<table>
<tr ng-repeat="person in people" my-element="person"></tr>
</table>
Live Demo
现场演示
回答by zs2020
Apply the directive to <tr>like this:
<tr>像这样应用指令：
<table class="table table-hover">
<tr my-element blah='p' ng-repeat="p in people"></tr>
</table>
app.directive('myElement', function () {
return {
restrict: 'A',
scope:{
ngModel: '=blah'
},
template: '<td>Name: {{ ngModel.name }}</td><td>Age: {{ ngModel.age }}</td>'
}
});
回答by boneskull
Use replace: truein your directive and your <my-element>will be replaced with the root item in your template, a <td>, so this will not confuse the HTML.
replace: true在您的指令中使用，您<my-element>将被替换为模板中的根项目 a <td>，因此这不会混淆 HTML。
