时间戳

首页 > 解决方案 > Angular 指令包括创建“巫毒模式？”

angularjs - Angular 指令包括创建“巫毒模式？”

问题描述

我有一个指令，它在一个看起来像这样的表中创建一行：

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

标签： angularjsangularjs-directive

解决方案

多一点研究，发现这个问题可以通过使用指令作为 tr 元素的属性来解决，而不是在指令中包含 tr 即使用

 <tr person-row>..</tr>

代替

 <person-row></person-row>

推荐阅读