Angular指令包括创建“伏都教模式”?

时间:2018-06-23 22:13:34

标签: angularjs angularjs-directive

我有一条指令,该指令在表中创建如下所示的行:

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

1 个答案:

答案 0 :(得分:1)

更多的研究发现,可以通过将伪指令用作tr元素上的属性而不是在伪指令中包含tr来解决此问题,即使用

restart()

代替

blockingReceive()