ng-repeat with ng-include not working。

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?

我正在尝试使用一个包含ng-include的ng-repeat。问题是，ng-repeat中的第一个元素只是ng-include模板，其中没有填充来自ng-repeat的任何数据。是否有一种方法可以将来自ng-include的模板绑定到第一个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?

例如，如果我的ng-repeat包含10个条目，那么呈现的第一个条目就是空模板。项目2-10将按他们应该的方式呈现。我做错了什么?

3 个解决方案

#1

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:

解决您的问题的一种可能的解决方法是不显示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"
}
})

#2

I ran into the same problem, and finally figured out that the first element has not been fetched and compiled in time for the first ng-repeat iteration. Using $templateCache will fix the problem.

我遇到了同样的问题，并最终发现第一个元素没有在第一个ng重复迭代的时候被获取和编译。使用$templateCache可以解决这个问题。

You can cache your template in a script tag:

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

Or in your app's run function:

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

You can also use $templateCache inside your directive, although it's a bit harder to setup. If your templates are dynamic, I would recommend creating a template cache service. This SO question has some good examples of template caching inside a directive and a service:

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

在指令中使用$http和$templateCache不会返回结果。

#3

Using a directive worked for me: https://*.com/a/24673257/188926

使用一个指令对我有用:https://*.com/a/24673257/188926

In your case:

在你的例子:

1) define a directive:

1)定义一个指令:

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

2) use your new directive:

2)使用你的新指示:

<mytemplate />

... or if you're concerned about HTML validation:

…或者如果你关心HTML验证:

<div mytemplate></div>

#1