AngularJS NG-重复使用自定义元素在表内被渲染诡异 [英] AngularJS ng-repeat with custom element inside a table is rendering strangely
问题描述
我想重新使用在多个地方我的HTML视图的一部分。我想重新使用的部分是一个HTML表格表格单元格。问题是,一个NG重复里面我的自定义指令是做有趣的事情。我已复制的的jsfiddle 的问题。有在的jsfiddle两个HTML表。第一是纳克重复写在视图中的表格单元,第二个是从一个指令,我的元件来的表格单元。 Chrome的开发工具报告所呈现的HTML看起来像这样。需要注意的是自定义元素仅出现一次,是表外。
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
<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>
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>
来源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
}];
}
请注意,是的jsfiddle一个简单的例子和常识将导致刚刚没有使用的指令在所有。然而,我的目标code的,我想重新使用一个更大的模板。我一直在使用NG-包括以及尝试,但结果是相似的。
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.
推荐答案
&LT; TD&GT;
众所周知,在这样的指令奇怪的行为。相反,使用指令父&LT; TR&GT;
。了解更多关于这里这个问题:<一href=\"https://github.com/angular/angular.js/issues/1459\">https://github.com/angular/angular.js/issues/1459
<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
<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>'
};
});
和传递项的值
像这样:
<table>
<tr ng-repeat="person in people" my-element="person"></tr>
</table>
这篇关于AngularJS NG-重复使用自定义元素在表内被渲染诡异的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!