AngularJS：在多维数组上使用 ng-include 进行 ng-repeat

Question

我昨天开始使用 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-include 调用的模板articleCollection.htm 在我的页面news.html 上使用ng-repeat。

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-repeated articleCollection.htm？

在此先感谢，感谢您提供任何意见。

Answer 1

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

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

Answer 2

首先，在 ngInclude 中使用 ngRepeat 会损害 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"
 }
})