ng-repeat с динамической ошибкой ng-include и шаблоном.

Question

Когда ng-repeat имеет динамический ng-include с переменными, он не принимает переменные должным образом.

См. Это plunker.

Основной 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> 

Вы можете увидеть на ссылке без нг-включить это работает идеально.

P.S. Это прототип того, что я на самом деле пытаюсь достичь. В основном у меня проблема с переменными, используемыми в динамическом ng-include, присутствующем в ng-repeat.

Я проверил похожие вопросы, как показано ниже, но не получил ответов.

123

Answer 1

Директива ng-include не создает новый объект $scope, но образцово наследует его, так что ваш profile переписывается с другим значением.

Итак, сначала вы говорите profile=theStudent, а затем вы переписываете его 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> 

См this updated plunker

Answer 2

Вы также можете создать второй 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> 

Answer 3

Вместо того, чтобы использовать как ng-include и ng-if директивы добиться того, что вы хотите, вы можете создать простую profile директивы с изолированной сферой и передавать данные в него.

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>