AngularJS:在多维数组上使用ng-include进行ng-repeat [英] AngularJS: ng-repeat with ng-include on a multidimensional array
问题描述
我昨天启动了AngularJS,在大型抽象方面我需要帮助.
I've started AngularJS yesterday and I need help on a large abstraction.
所以,我的Controller.js中有一个多维数组:
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'
}
];
}]);
我在所有项目上运行$sce.trustAsHtml
,它们完美地呈现了html.
I run $sce.trustAsHtml
on all items and they render html perfectly.
所以,我要做的是使用ng-include
调用的模板articleCollection.htm在页面news.html上使用ng-repeat
.
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:
news.html:
<div ng-repeat="x in news">
<div ng-include src="js/views/articleCollection.htm"></div>
</div>
articleCollection.htm:
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 -->
由于我刚启动AngularJS,所以我的代码中存在很多可能的问题;我不知道从哪里开始调试.
Since I've just started AngularJS, there's just so many possible problems in my code; I don't know where to begin debugging.
我为什么要在页面上呈现注释掉的内容,而不是ng重复的articleCollection.htm?
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.
推荐答案
ngInclude
指令在src
属性中采用一个表达式.这意味着,如果只是 static 字符串路径,则需要在引号中提供一个字符串路径:
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>
这篇关于AngularJS:在多维数组上使用ng-include进行ng-repeat的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!