如何动态构建ng-include src?

时间:2013-09-24 08:14:17

标签: angularjs angularjs-ng-repeat angularjs-ng-include

我有以下代码:

<div ng-repeat="module in modules" id="{{module.Id}}">
    <ng-include ng-init="bootstrapModule(module.Id)" src=""></ng-include>
</div>

我希望能够在src中构建一个字符串,如下所示:

/modules/{{module.Name}}/{{module.Name}}.tpl.html

但我一直在遇到障碍。我试图使用回调函数来构建它,

$scope.constructTemplateUrl = function(id) {
    return '/modules/' + id + '/' + id + '.tpl.html';
}

但这被称为&amp; amp;过度&amp;结束了它似乎不喜欢那样。我也试着像这样构建它:

ng-src="/modules/{{module.Id}}/{{module.Id}}.tpl.html"

但这也不起作用。我不想花几个小时在灌木丛中吵闹,我想知道是否还有其他人遇到过这样的事情并有任何想法?

此外,当我从$ resource中获取模块时,我将使用$ q异步返回它们,所以我似乎无法将其添加到模块之前,因为$scope.modules只是等于此时有一个then函数。

有什么想法吗?

1 个答案:

答案 0 :(得分:57)

ngInclude | src指令需要一个角度表达式,这意味着你应该写

ng-src="'/modules/' + module.Id + '/tpl.html'"

来自http://docs.angularjs.org/api/ng.directive:ngInclude

  

ngInclude | src字符串角度表达式求值为URL。如果   source是一个字符串常量,请确保将其包装在引号中,例如   SRC = “ 'myPartialTemplate.html'”。

如果在模型中构建url而不是内联HTML

,可能会更好
<div ng-repeat="module in modules" id="{{module.Id}}">
    <ng-include src="module.url"></ng-include>
</div>