AngularJS：与包括上一个多维数组的重复(AngularJS: ng-repeat with

我已经开始AngularJS昨天，我需要在一个大的抽象帮助。

所以，我在我的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' } ]; }]);

我运行$sce.trustAsHtml上的所有项目，他们呈现HTML完美。

所以，我想要做的是使用ng-repeat使用的由所谓的模板articleCollection.htm我的网页news.html 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 -->

然而，这就是我的网页上呈现：

 <!-- 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 -->

因为我刚开始AngularJS，还有在我的代码只是许多可能出现的问题; 我不知道从哪里开始调试。

为什么我的渲染我的网页上注释的内容，而不是NG-重复articleCollection.htm？

由于提前，和任何输入被理解。

Answer 1:

ngInclude指令采用在表达src属性。这意味着你需要在引号中提供的字符串路径，如果它只是一个静态的路径字符串：

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

Answer 2:

首先，使用ngRepeat与ngInclude伤害在AngularJS性能：

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

然后，你应该使用一个指令：

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