我有一条指令,该指令在表中创建如下所示的行:
angular.module("myApp").directive('personRow', function() {
return {
template: "<tr><td>{{person.name}}</td><td>{{person.age}}</td></tr>"
}
});
但是,当我尝试对集合使用ng-repeat指令时,会得到一些非常奇怪的结果-这是在我的页面中:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Looping wirth ng-repeat:</p>
<table>
<tr><td>foo</td></tr>
<person-row ng-repeat="person in people"></person-row>
<tr></tr>
</table>
</div>
以下是输出:
Looping with ng-repeat:
John32Mary45
foo
所有表元素似乎都已在指令之后移动,并且在其上以某种方式在指令之前的“ foo”行也已移动。
页面上生成的html如下:
<div ng-app="myApp" ng-controller="myCtrl" class="ng-scope">
<p>Looping wirth ng-repeat:</p>
<!-- ngRepeat: person in people --><person-row ng-repeat="person in people" class="ng-binding ng-scope">John32</person-row><!-- end ngRepeat: person in people --><person-row ng-repeat="person in people" class="ng-binding ng-scope">Mary45</person-row><!-- end ngRepeat: person in people --><table>
<tbody><tr><td>foo</td></tr>
<tr></tr>
</tbody></table>
</div>
不知道这是怎么回事...
这是一个产生完整代码的https://plnkr.co/edit/ia2Um68YF4OzWWsiIGKL?p=info
答案 0 :(得分:1)
更多的研究发现,可以通过将伪指令用作tr元素上的属性而不是在伪指令中包含tr来解决此问题,即使用
restart()
代替
blockingReceive()