如何动态构建 ng-include src?
Posted
技术标签:
【中文标题】如何动态构建 ng-include src?【英文标题】:How do I dynamically build an 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'"
来自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>
【讨论】:
你的方法现在可以了,但我确定我之前尝试过,我一定是在使用 ng-src 而不仅仅是 src。谢谢@rogerz! @rogerz - 这也适用于我。在我的示例中它可以工作,但我在控制台中收到 404 错误。请参阅回复:***.com/a/33299027/828282 有什么想法吗?谢谢<div ng-repeat="module in modules" id="module.Id" ng-include src="module.url"></div>
以上是关于如何动态构建 ng-include src?的主要内容,如果未能解决你的问题,请参考以下文章
AngularJS:ng-include 和 ng-controller