ダイナミックng-includeとテンプレート変数によるng-repeatスコープの問題

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> 

あなたはそれが完璧に動作します-には、ngのなしのリンクで見ることができます

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

profile.htmlコード。

P.S.これは私が実際に達成しようとしているプロトタイプです。 主に、ng-repeatに存在するダイナミックng-includeで使用される変数に問題があります。

私は以下のような同様の質問をチェックしましたが、回答が得られませんでした。

123

Answer 1

ng-includeディレクティブは新しい$scopeオブジェクトを作成しますが、prototypicallyそれを継承するので、あなたのprofileは別の値で上書きされていません。

最初にprofile=theStudentとし、それをprofile=theTeacherで上書きするため、両方のテンプレートで常に先生に設定されます。

新しい$scopeオブジェクトを作成しng-if="true"を追加することによってこの問題を解決するために少し「ハック」があります：あなたはまた、profile.htmlように、第2のhtmlを作成することができますthis updated plunker

Answer 2

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

を参照してくださいにしてあなたのコードは次のようになります後：

index.htmlを

代わりに、あなたが望むものを達成するために、両方の ng-includeと ng-ifディレクティブを使用しての

profile2.html

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

Answer 3

、あなたは孤立範囲でシンプルな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>