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

Question

When ng-repeat is having dynamic ng-include with variables, it is not taking variables properly.

See this plunker .

main html code

<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 code

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

You can see at link without ng-include it works perfect.

PS This is prototype of what I am actually trying to achieve. Mainly I am having problem with variables used in dynamic ng-include present in ng-repeat.

I have checked similar questions like below but not getting any answers.

1 2 3

Answer 1

The ng-include directive does not create a new $scope object, but prototypically inherits it, so your profile is overwritten with another value.

So first you say profile=theStudent and then you overwrite it with profile=theTeacher , therefore in both templates it is always set to the teacher.

There is a little 'hack' to fix this by adding the ng-if="true" , which creates a new $scope object:

<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>

See this updated plunker

Answer 2

Instead of using both ng-include and ng-if directives to achieve what you want, you can create a simple profile directive with isolated scope and pass data into it.

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>

Answer 3

You can also create second html as profile.html and after your code will like :

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>