web-dev-qa-db-fra.com

Comment créer dynamiquement un src ng-include?

J'ai le code suivant:

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

Je veux pouvoir construire une chaîne en src comme ceci:

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

Mais je continue de frapper des barrages routiers. J'ai essayé d'utiliser une fonction de rappel pour le construire,

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

Mais cela est appelé encore et encore et cela ne semble pas aimer ça. J'ai aussi essayé de le construire comme ceci:

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

Mais cela ne fonctionne pas non plus. Plutôt que de passer des heures à tourner autour du pot, je me demandais si quelqu'un d'autre s'était heurté à quelque chose comme ça et avait des idées?

De plus, lorsque je récupère les modules à partir de $ resource, je les renvoie de manière asynchrone avec $ q, donc je n'arrive pas à passer au travers et à les ajouter dans les modules avant dans le contrôleur en tant que $scope.modules est juste égal à une fonction then à ce point.

Des idées?

angularjsangularjs-ng-repeatangularjs-ng-include
27
Adam K Dean

ngInclude | src la directive nécessite une expression angular, ce qui signifie que vous devriez probablement écrire

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

De http://docs.angularjs.org/api/ng.directive:ngInclude

ngInclude | src string angular évaluée en URL. Si la source est une constante de chaîne, assurez-vous de la mettre entre guillemets, par exemple src = "'myPartialTemplate.html'").

Il pourrait être préférable de construire l'URL dans le modèle au lieu du HTML en ligne

<div ng-repeat="module in modules" id="{{module.Id}}">
    <ng-include src="module.url"></ng-include>
</div>
58
rogerz