帶有動態ng-include和模板變量的ng-repeat範圍問題

當ng-repeat使用動態ng-include包含變量時，它沒有正確地使用變量。帶有動態ng-include和模板變量的ng-repeat範圍問題

看到這個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>

您可以在鏈接看不NG-包括它的作品完美。

P.S.這是我實際嘗試實現的原型。主要是我在動態ng-include中使用的變量存在ng-repeat中的問題。

我查看過類似的問題，但沒有得到任何答案。

1 2 3

來源

2016-09-28 Somnath Muluk

你說，你不能看到下數據和NG-包括正確的？ –

@SaEChowdary：是 –

ng-include會創建一個「新範圍」。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#ng-include。這裏的問題是，首先你要設置option = val.student然後profile = val.teacher。個人資料越來越受到重視。你有沒有嘗試創建一個隔離範圍的指令。所以你不需要同時使用ng-include和ng-if。 –

的ng-include指令不創建一個新的$scope對象，但prototypically繼承它，所以你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

來源

2016-09-28 09:26:34 devqon

這工作正常。沒有任何方法沒有黑客？ @devqon –

@SomnathMuluk是的，看到我的答案。 –

您還可以創建第二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>

來源

2016-09-28 09:34:40

這將迫使你保持2個模板具有相同的內容 – devqon

我不想有2個模板。這是原型。我在模板中有很長的html。 –

而是同時使用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>

來源

2016-09-28 10:17:48

帶有動態ng-include和模板變量的ng-repeat範圍問題

回答

相關問題