AngularJS: ng-repeat with ng-include on a multidimensional array

Question

I've started AngularJS yesterday and I need help on a large abstraction.

So, I have a multidimensional array in my Controller.js:

var appname = angular.module('appname');

appname.controller('articleCollectionController', ['$scope', '$sce', function ($scope, $sce) {
     $scope.news = [{
         title: 'foobar breakthrough',
         text: 'foobar foobar',
         image: '<img class="img-responsive img-hover" src="images/foo.jpg">',
         date: 'June 17, 2014',
         author: 'John Smith',
         articleType: 'link',
         neverSettle: 'engaging',
         category: 'news'
     },
     {
         title: 'foobars available',
         text: 'foobee foobar',
         image: '<img class="img-responsive img-hover" src="images/bar.jpg">',
         date: 'June 17, 2014',
         author: 'John Smith',
         articleType: 'link',
         neverSettle: 'innovating',
         category: 'news'
     },
     {
         title: 'foo foo foo',
         text: 'foobar foobar! foobar',
         image: '<img class="img-responsive img-hover" src="images/foobar.jpg">',
         date: 'June 17, 2014',
         author: 'Alice Roberts',
         articleType: 'pdf',
         neverSettle: 'partnering',
         category: 'news'
     }
  ];
  }]);

I run $sce.trustAsHtml on all items and they render html perfectly.

So, what I want to do is use ng-repeat on my page news.html using the template articleCollection.htm called by ng-include.

news.html:

<div ng-repeat="x in news">
    <div ng-include src="js/views/articleCollection.htm"></div>
</div>

articleCollection.htm:

<!-- Blog Preview Row -->
<div class="row">
    <div class="col-md-1 text-center">
        <p>
            <span ng-bind-html="x.articleType"></span>
        </p>
        <p>
            <span ng-bind-html="x.neverSettle"></span>
        </p>
        <p><span ng-bind-html="x.date"></span></p>
    </div>
    <div class="col-md-5">
        <a href="news-article.html">
            <span ng-bind-html="x.image"></span>
        </a>
    </div>
    <div class="col-md-6">
        <h3>
            <a href="news-article.html"><span ng-bind-html="x.title"></span></a>
        </h3>
        <p>
            by <span ng-bind-html="x.author"></span>
        </p>
        <p><span ng-bind-html="x.text"></span></p>
        <a class="btn btn-default" href="news-article.html">Read More <i class="fa fa-angle-right"></i></a>
    </div>
</div>
<!-- /.row -->

However, this is what is rendered on my page:

<!-- ngRepeat: x in news -->
<div ng-repeat="x in news" class="ng-scope">
    <!-- ngInclude:  -->
</div>
<!-- end ngRepeat: x in news -->
<div ng-repeat="x in news" class="ng-scope">
    <!-- ngInclude:  -->
</div>
<!-- end ngRepeat: x in news -->
<div ng-repeat="x in news" class="ng-scope">
    <!-- ngInclude:  -->
</div>
<!-- end ngRepeat: x in news -->

Since I've just started AngularJS, there's just so many possible problems in my code; I don't know where to begin debugging.

How come I'm rendering commented-out content on my page, instead of the ng-repeated articleCollection.htm?

Thanks in advance, and any input is appreciated.

I think it would be a better practice to build a directive and use that html as its template, you would have more control over what´s going on and directives are awesome! — Fedaykin
– Fedaykin, Commented May 28, 2015 at 19:58

dfsq · Accepted Answer · 2015-05-28 19:52:51Z

2

ngInclude directive takes an expression in src attribute. It means that you need to provide a string path in quotes if it's just a static string path:

<div ng-repeat="x in news">
    <div ng-include src="'js/views/articleCollection.htm'"></div>
</div>

answered May 28, 2015 at 19:52

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chihuahua Enthusiast Over a year ago

Bam. You did it. Thank you very much! Will accept in 10 minutes.

Nicolas2bert · Accepted Answer · 2015-05-28 20:00:06Z

2

First, using ngRepeat with ngInclude hurts performance in AngularJS :

http://www.bennadel.com/blog/2738-using-ngrepeat-with-nginclude-hurts-performance-in-angularjs.htm

Then, you should use a directive :

html:

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

js:

angular.module("app").directive("includeDirective", function() {
 return {
    restrict: "E",
    templateUrl: "js/views/articleCollection.htm"
 }
})

answered May 28, 2015 at 20:00

Nicolas2bert

1,1527 silver badges10 bronze badges

1 Comment

Chihuahua Enthusiast Over a year ago

Looks like the general consensus on good AngularJS practice is directives. I'll start looking into it.

Collectives™ on Stack Overflow

AngularJS: ng-repeat with ng-include on a multidimensional array

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related