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>

您可以在 link 看到没有 ng-include 它工作完美。

P.S。这是我实际想要实现的原型。主要是我在 ng-repeat 中存在的动态 ng-include 中使用的变量有问题。

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

1 2 3

Answer 1

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

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

有一点 'hack' 可以通过添加 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

Answer 2

您还可以创建第二个 html 作为 profile.html 并且在您的代码之后会像：

index.html

<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="'profile2.html'" onLoad="profile2=val.teacher"></div>
          </td>
        </tr>
      </tbody>

profile2.html

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

Answer 3

无需同时使用 ng-include 和 ng-if 指令来实现您想要的效果，您可以创建一个具有独立范围的简单 profile 指令并将数据传递到其中。

plucker

angular.module('ng-include-example', []).
controller("MainCtrl", function($scope) {

  var data = [
       {
         "student" : { "id":11, "name": "John" },
         "teacher" : { "id" : 21, "name": "Mike"}
       },
       {
         "student" : { "id":12, "name": "Tony" },
         "teacher" : { "id" : 22, "name": "Jack"}
       },
       {
         "student" : { "id":13, "name": "Cris" },
         "teacher" : { "id" : 23, "name": "Anthony"}
       },
       {
         "student" : { "id":14, "name": "Greg" },
         "teacher" : { "id" : 24, "name": "Reva"}
       }

    ];

    $scope.data = data;

})
.directive("profile", function(){
  return{
    restrict:'E',
    scope:{
      profile: "="
    },
    templateUrl: "profile.html"
  }
});

<div>
  Using Directive
  <table style>
      <tr>
        <th>Student</th>
        <th>Teacher</th>
      </tr>
      <tbody ng-repeat="val in data">
        <tr>
          <td>
            <profile profile = "val.student"></profile>
          </td>
          <td>
            <profile profile = "val.teacher"></profile>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

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

ng-repeat with dynamic ng-include and template variables scope issue

javascript

variables

angularjs

angularjs-ng-repeat

angularjs-ng-include