AngularJS: ngInclude e URL dinamici

Question

Sto utilizzando la direttiva ngInclude per caricare i frammenti HTML. Ora sto cercando il modo migliore per passare un URL dinamico. So che posso creare l'URL con concatenazione di stringhe:

<ng-include src="'/foo/' + fooId + '/bar/' + barId + '/baz/' + bazId"></ng-include> 

Ai miei occhi questo è un po 'brutto.

ngHref e ngSrc, ad esempio, accettare gli URL contenenti il ​​markup {{}}. IMHO questa sintassi è molto più pulita:

<img ng-src="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/> 
<a ng-href="/foo/{{fooId}}/bar/{{barId}}/baz/{{bazId}}"/> 

C'è un modo migliore per passare URL dinamici a ngInclude?

Answer 1

Non sicuro se questo è "migliore" o meno, ma è possibile creare una funzione sull'oscilloscopio per incapsulare questo.

app.controller("MyCtrl", function($scope) { 
    $scope.fooId = "123"; 
    $scope.barId = "abc"; 
    $scope.bazId = "abc"; 

    $scope.templateUrl = function() { 
    return "/foo/"+ $scope.fooId +"/bar/"+ $scope.barId +"/baz/"+ $scope.bazId; 
    } 
}); 

Poi si dovrebbe utilizzare in questo modo ...

<div ng-controller="MyCtrl"> 
    <ng-include src="templateUrl()"></ng-include> 
</div> 

Ecco un esempio vivo di questo tipo di cose: http://plnkr.co/edit/Lu3icqPgg1dpNCj6a3Dn?p=preview

Answer 2

@jessegavin è un uso migliore di questo codice

<ng-include ng-init="tmplUrl = templateUrl();" src="tmplUrl"></ng-include> 

se si utilizzerà in questo modo

<ng-include src="templateUrl()"></ng-include> 

templateUrl chiama alcune volte. (3 volte). prova console.log. penso a causa di $ varibles variabile

$ scope.templateUrl = function() { var url = "/ foo /" + $ scope.fooId + "/ bar /" + $ scope.barId + "/ baz/"+ $ scope.bazId; console.log (url); url di ritorno; }