Problematic situation when using ng-repeat with dynamic ng-include and template variables scope conflict

Question

Problematic situation when using ng-repeat with dynamic ng-include and template variables scope conflict

When utilizing ng-repeat with dynamic ng-include that includes variables, the variables are not being properly recognized.

Take a look at this code snippet.

Here is the 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>

And here is the profile.html code:

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

Without using ng-include, everything works perfectly fine.

P.S. This is just a prototype of my desired functionality. I am specifically struggling with getting variables to work in dynamic ng-include within ng-repeat.

I have reviewed similar questions like these ones but haven't found any solutions:

1 2 3

javascript angularjs variables angularjs-ng-repeat angularjs-ng-include

Answer 1

Answer №1

When using the ng-include directive, it's important to note that it does not create a new $scope object. Instead, it prototypically inherits from the existing one, which can lead to unintentional overwriting of values. In this case, if you set profile=theStudent and then overwrite it with profile=theTeacher, the profile will always be set to the teacher in both templates.

To work around this issue, you can use a little 'hack' by adding the ng-if="true" attribute, which forces the creation of 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>

For an updated example, you can refer to this plunker

Answer 2

When using the ng-include directive, it's important to note that it does not create a new $scope object. Instead, it prototypically inherits from the existing one, which can lead to unintentional overwriting of values. In this case, if you set profile=theStudent and then overwrite it with profile=theTeacher, the profile will always be set to the teacher in both templates.

To work around this issue, you can use a little 'hack' by adding the ng-if="true" attribute, which forces the creation of 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>

For an updated example, you can refer to this plunker

Answer 3

Answer №2

Instead of using both ng-include and ng-if directives to achieve the desired outcome, a simpler approach is to create a custom profile directive with an isolated scope and pass data into it.

Plunker demo

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 4

Instead of using both ng-include and ng-if directives to achieve the desired outcome, a simpler approach is to create a custom profile directive with an isolated scope and pass data into it.

Plunker demo

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 5

Answer №3

To improve your coding experience, consider creating a separate HTML file named profile.html and then incorporate it into your code as shown below:

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>Full Name - {{profile2.name}}</span>

Answer 6

To improve your coding experience, consider creating a separate HTML file named profile.html and then incorporate it into your code as shown below:

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>Full Name - {{profile2.name}}</span>

Problematic situation when using ng-repeat with dynamic ng-include and template variables scope conflict

Answer №1

Answer №2

Answer №3

Similar questions

Get the large data file in sections

Submitting a form with JQuery and Ajax technology

When scrolling, dynamically change the background color by adding a class

Receive real-time price updates from Next.js using GetServerSideProps data

Firebase onSnapshot error when retrieving data from Snapchot

Generate a new style element, establish various classes, and append a class to the element

Transforming JSON data into XML using Angular 7

Display different text based on the property value

Exploring the secure synergy between Laravel 5.5 Passport client_secret and Vue JS authentication

Encountering a bindings issue when trying to utilize libxml-xsd within an electron application

Pull in class definitions from the index.js file within the node_modules directory

Implementing long-lasting login functionality in React using JSON Web Tokens

Displaying interactive charts in a pop-up window using Highcharts within a Bootstrap

Errors in socket.on Listeners Result in Inaccurate Progress and Index Matching for Multiple Video Uploads

Fade-in effect applied to images upon exposure

Getting the Value from a Promise into a Variable in a React Component

Tips for ensuring a consistent highlight for an active link in Bootstrap

Angular2 bootstrapping of multiple components

The anchor tag is not being used in the function call in an Angular application

Having an issue while running the command "npm start" in Visual Studio with React.js