具有动态ng-include和模板变量的ng-repeat范围问题

Question

当ng-repeat具有带有变量的动态ng-include时，它不能正确获取变量。

见这个笨蛋 。

主要的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的链接上看到它的完美效果。

PS：这是我实际上想要实现的原型。 主要是我对ng-repeat中存在的动态ng-include中使用的变量有疑问。

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

1 2 3

Answer 1

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

因此，首先您说profile=theStudent profile=theTeacher ，然后用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>

看到这个更新的矮人

Answer 2

除了使用ng-include和ng-if指令来实现所需的功能外，您还可以创建具有隔离范围的简单profile指令并将数据传递到其中。

拔毛器

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>

Answer 3

您还可以创建第二个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>