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

What steps can be taken to seek assistance for a specific function within a module while using the REPL in node.js?

Issue with MiniCssExtractPlugin during compilation of the entry point build

Send data containing special characters through a GET request in PHP

Employing jQuery Mobile with MVC3 for seamless auto-submit functionality

Generating an interactive table using JSON data in ReactJS

Is there a way to retrieve the ID value instead of the displayValue from md-autocomplete in my servlet?

Once an element is removed from ng-repeat, it does not provide the capability to remove or conceal the element from

Is there a way to dynamically assign column names during the import process?

Ways to prevent a timeout when the score exceeds 1000

SonarQube flagging a suggestion to "eliminate this unnecessary assignment to a local variable"

Exploring File Read and Write Functionality in Angular 4

update the dropdown values in the database by submitting the form

The ng-model failed to display the updated value until a click was made somewhere on the page

Querying the jQuery-Plugin to interact with AngularJS service methods

nested dropdowns in Bootstrap 4

What are some ways to conceal methods within a class so that they are not accessible outside of the constructor

Angular Compilation Blocked Due to Circular Dependency Error

Add a fresh record only if it contains information and there are no existing duplicates present

Using local variables from an external HTML file within an AngularJS directive template

Discovering the Vertical Dimension of a Web Page Displayed in a Window