4

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.

P.S. 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

Community
  • 1
  • 1
Somnath Muluk
  • 55,015
  • 38
  • 216
  • 226
  • your saying that you cant see data under with ng-include right?? – Sa E Chowdary Sep 28 '16 at 09:22
  • @SaEChowdary: Yes – Somnath Muluk Sep 28 '16 at 09:33
  • ng-include does create a "new scope". https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include. Problem here is that first you are setting option = val.student then profile= val.teacher. profile is getting overrided. Did you try creating a directive with isolate scope. So that you dont need to use both ng-include and ng-if. – Ravi Teja Sep 28 '16 at 10:05

3 Answers3

2

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

devqon
  • 13,818
  • 2
  • 30
  • 45
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>
Ravi Teja
  • 1,097
  • 8
  • 13
0

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>
Riddhi Gohil
  • 1,758
  • 17
  • 17