如何动态构建 ng-include src？答案

【问题标题】：How do I dynamically build an ng-include src?如何动态构建 ng-include src？
【发布时间】：2013-09-29 08:28:28
【问题描述】：

我有以下代码：

<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';
}

但这被一遍又一遍地调用，它似乎不喜欢那样。我也尝试过这样构建它：

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

但这也不起作用。与其花几个小时拐弯抹角，我想知道是否有其他人遇到过这样的事情并有任何想法？

另外，当我从 $resource 中获取模块时，我会用 $q 异步返回它们，所以我似乎无法通过并将其添加到控制器之前的模块中，因为 $scope.modules 等于 @ 987654326@ 那个时候的函数。

有什么想法吗？

【问题讨论】：

【解决方案1】：

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

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

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>

【讨论】：

你的方法现在可以了，但我确定我之前尝试过，我一定是在使用 ng-src 而不仅仅是 src。谢谢@rogerz！
@rogerz - 这也适用于我。在我的示例中它可以工作，但我在控制台中收到 404 错误。请参阅回复：stackoverflow.com/a/33299027/828282 有什么想法吗？谢谢
<div ng-repeat="module in modules" id="{{module.Id}}" ng-include src="module.url"></div>