Как динамически создать ng-include src?

У меня есть следующий код:

<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 просто равняется функции then в этот момент.

Любые идеи?


angularjs angularjs-ng-repeat angularjs-ng-include
person Adam K Dean    schedule 24.09.2013    source источник
comment
какую ошибку вы получаете?   -  person Nitish Kumar    schedule 24.09.2013

Ответы (1)


arrow_upward
59
arrow_downward

ngInclude | src требует углового выражения, что означает, что вам, вероятно, следует написать

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

Из http://docs.angularjs.org/api/ng.directive:ngInclude.

ngInclude|src строковое угловое выражение, вычисляющее URL. Если источник является строковой константой, убедитесь, что вы заключили его в кавычки, например. src="'myPartialTemplate.html'".

Было бы лучше, если бы вы построили URL-адрес в модели вместо встроенного HTML.

<div ng-repeat="module in modules" id="{{module.Id}}">
    <ng-include src="module.url"></ng-include>
</div>
person rogerz    schedule 24.09.2013
comment
Ваш метод работает сейчас, но я был уверен, что пробовал его раньше, я, должно быть, использовал ng-src вместо просто src. Спасибо @rogerz! - person Adam K Dean; 24.09.2013
comment
@rogerz - у меня это тоже работает. В моем примере это работает, но я получаю ошибку 404 в консоли. См. ответ на: stackoverflow.com/a/33299027/828282 Есть идеи? Спасибо - person Paul; 23.10.2015