ng-repeat 和 ng-include 不起作用 [英] ng-repeat with ng-include not working

问题描述

我正在尝试使用包含 ng-include 的 ng-repeat.问题是 ng-repeat 中的第一个元素只是 ng-include 模板，没有填充 ng-repeat 中的任何数据.有没有办法我可以以某种方式从 ng-include 绑定模板，以便它适用于第一个 ng-repeat?

<div ng-include src="'views/template.html'"></div>

例如，如果我的 ng-repeat 包含 10 个项目，那么渲染的第一个项目将只是空模板.项目 2-10 将按原样呈现.我做错了什么?

解决方案

首先确保项目的第一个索引中包含的数据确实包含您想要的数据.

您的问题的一个可能解决方案是简单地不显示 ng-repeat 的第一个索引:

<div ng-include src="'views/template.html'"></div>

这实际上可能无法解决您的问题的根源，但它仍然可以让您的应用程序更像您期望的那样工作.

<小时>

另一种可能的解决方案:

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

参见此处的示例:

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

<小时>

另一种可能的修复方法只是为了更好地衡量:

使用组件:

html:

<my-include></my-include>

js:

angular.module("app").directive("myInclude", function() {返回 {限制:E"，templateUrl: "/views/template.html"}})

I am trying to use an ng-repeat that includes an ng-include. The problem is that the first element in the ng-repeat is just the ng-include template with none of the data from the ng-repeat filled in. Is there a way I can somehow bind the template from the ng-include so it works on the first ng-repeat?

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

For example, if my ng-repeat contains 10 items, then the first item that is rendered will just be the empty template. Items 2-10 WILL be rendered as they should be. What am I doing wrong?

解决方案

First make sure that the data that is contained in the first index of items actually has the data that you want.

One possible solution to your problem would be to simply not show the first index of the ng-repeat:

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

This may not actually tackle the root of your problem, but it may still get your application working a bit more like what you expect.

---

Another possible solution:

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

see example here:

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

---

One more possible fix just for good measure:

Use a component:

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"
}
})

这篇关于ng-repeat 和 ng-include 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！