javascript - ng-repeat 与动态 ng-include 和模板变量范围问题

Question

当 ng-repeat 对变量进行动态 ng-include 时，它​​没有正确获取变量。

查看此 plunker .

主要的html代码

<table style>
  <tr>
    <th>Student</th>
    <th>Teacher</th>
  </tr>
  <tbody ng-repeat="val in data">
    <tr>
      <td>
        <div ng-include src="'profile.html'" onLoad="profile=val.student"></div>
      </td>
      <td>
        <div ng-include src="'profile.html'" onLoad="profile=val.teacher"></div>
      </td>
    </tr>
  </tbody>
</table>

profile.html代码

<span>Id - {{profile.id}}</span>
<span>Name - {{profile.name}}</span>

您可以在没有 ng-include 的链接中看到它工作完美。

附言这是我实际想要实现的原型(prototype)。 主要是我对 ng-repeat 中存在的动态 ng-include 中使用的变量有疑问。

我检查了如下类似的问题，但没有得到任何答案。

1 2 3

Answer 1

ng-include 指令不会创建新的 $scope 对象，但原型(prototype)会继承它，因此您的 profile 会被另一个覆盖值(value)。

所以首先你说 profile=theStudent 然后你用 profile=theTeacher 覆盖它，因此在两个模板中它总是设置为教师。

通过添加 ng-if="true" 可以解决这个问题，它会创建一个新的 $scope 对象:

<tbody ng-repeat="val in data">
    <tr>
        <td>
            <div ng-include src="'profile.html'"
                 onLoad="profile=val.student"
                 ng-if="true"></div>
        </td>
        <td>
            <div ng-include src="'profile.html'" 
                 onLoad="profile=val.teacher"
                 ng-if="true"></div>
        </td>
    </tr>
</tbody>

参见 this updated plunker