ng-repeat mit ng-include funktioniert nicht

Question

Ich versuche eine ng-repeat zu verwenden, die eine ng-include enthält. Das Problem ist, dass das erste Element in der ng-Wiederholung ist nur die ng-include Vorlage mit keiner der Daten aus der ng-repeat ausgefüllt. Gibt es eine Möglichkeit, ich kann die Vorlage aus der ng-include binden so funktioniert es auf der ersten ng-repeat?

<div ng-repeat="item in items"> 
    <div ng-include src="'views/template.html'"></div> 
</div> 

Zum Beispiel, wenn mein ng-repeat 10 Elemente enthält, dann wird das erste Element, das gemacht wird, wird nur die leere Vorlage sein. Die Punkte 2-10 werden so wiedergegeben, wie sie sein sollten. Was mache ich falsch?

Answer 1

Stellen Sie zuerst sicher, dass die Daten, die im ersten Index der Elemente enthalten sind, tatsächlich die gewünschten Daten haben.

Eine mögliche Lösung für Ihr Problem einfach wäre, den ersten Index der ng-Wiederholung nicht zeigen:

<div ng-repeat="item in items" ng-show="!$first"> 
    <div ng-include src="'views/template.html'"></div> 
</div> 

Dadurch wird die Wurzel des Problems nicht wirklich kann angehen, aber es kann immer noch Ihre Anwendung erhalten etwas mehr wie das, was Sie erwarten.

---

Eine andere mögliche Lösung:

<div ng-repeat="item in items" ng-include="'views/template.html'"></div> 

siehe Beispiel hier:

http://plnkr.co/edit/Yvd73HiFS8dXvpvpEeFu?p=preview

---

Eine weitere mögliche Lösung nur für eine gute Maßnahme:

Verwenden einer Komponente:

html:

<div ng-repeat="item in items"> 
    <my-include></my-include> 
</div> 

js:

angular.module("app").directive("myInclude", function() { 
return { 
    restrict: "E", 
    templateUrl: "/views/template.html" 
} 
}) 

Answer 2

I in das gleiche Problem lief, und schließlich herausgefunden, dass das erste Element in der Zeit nicht abgerufen worden und kompiliert für die erste ng-repeat Iteration. Mit $templateCache wird das Problem behoben.

---

Sie können Ihre Vorlage in einem Script-Tag-Cache:

<script type="text/ng-template" id="templateId.html"> 
    <p>This is the content of the template</p> 
</script> 

---

Oder in Ihrer Lauffunktion der App:

angular.module("app").run(function($http, $templateCache) { 
    $http.get("/views/template.html", { cache: $templateCache }); 
}); 

---

Sie auch $templateCache in Ihrer Richtlinie verwenden können, obwohl es ein bisschen schwieriger zu installieren ist. Wenn Ihre Vorlagen dynamisch sind, würde ich empfehlen, einen Vorlagen-Cache-Dienst zu erstellen.Diese Frage SO hat einige gute Beispiele für caching innerhalb einer Richtlinie und einen Dienst:

Using $http and $templateCache from within a directive doesn't return results

Answer 3

Mit einer Richtlinie für mich gearbeitet: https://stackoverflow.com/a/24673257/188926

In Ihrem Fall:

1) definieren ein Richtlinie:

angular.module('myApp') 
    .directive('mytemplate', function() { 
    return { 
     templateUrl: 'views/template.html' 
    }; 
    }); 

2) Ihre neue Richtlinie verwenden:

<mytemplate /> 

... oder wenn Sie concerned über HTML-Validierung sind:

<div mytemplate></div>