9

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?

Chris Paterson
  • 1,129
  • 5
  • 21
  • 31

3 Answers3

26

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"
}
})
Jake Johnson
  • 1,856
  • 1
  • 17
  • 26
  • Thanks for your solutions. It seems that it works when I navigate to the page by clicking on a "link" using ``$location.path(route);``. However, once on the page, if I click refresh, then I have the original issue where the first item in the ng-repeat isn't filled in (none of the tags in the first item are filled in). – Chris Paterson Jan 05 '14 at 16:11
  • @RomainFournereau I disagree. http://plnkr.co/edit/uBbXMlI5MYEcjIfXXeQT?p=preview – Jake Johnson Oct 21 '14 at 17:57
1

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.

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

Community
  • 1
  • 1
Blake Bowen
  • 1,049
  • 1
  • 12
  • 36
  • I am finding that $first and $last are always evaluating true for me on all repeated scopes - do you think your issue is related to mine ? Also $middle and $index is working fine - so I am using the scope variables correctly - anyone else ? – landed Jun 02 '15 at 16:04
1

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

In your case:

1) define a directive:

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

2) use your new directive:

<mytemplate />

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

<div mytemplate></div>
Community
  • 1
  • 1
Dunc
  • 18,404
  • 6
  • 86
  • 103