AngularJS: ngInclude und dynamische URLs

Question

Ich verwende die Direktive ngInclude, um HTML-Fragmente zu laden. Jetzt suche ich nach dem besten Weg, um eine dynamische URL zu übergeben. Ich weiß, ich kann die URL mit String-Verkettung erstellen:

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

In meinen Augen das ein bisschen hässlich.

ngHref und ngSrc akzeptieren Sie beispielsweise URLs mit {{}} Markup. IMHO diese Syntax ist viel sauberer:

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

Gibt es eine bessere Möglichkeit, dynamische URLs an ngInclude übergeben?

Answer 1

Nicht sicher, ob dies "besser" ist oder nicht, aber Sie könnten eine Funktion auf Ihrem Bereich erstellen, um diese einzukapseln.

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

Dann würden Sie es wie so verwenden ...

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

Hier ist ein anschauliches Beispiel für diese Art von Sache: http://plnkr.co/edit/Lu3icqPgg1dpNCj6a3Dn?p=preview

Answer 2

@jessegavin eine bessere Nutzung dieser Code

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

Wenn Sie diesen Weg verwenden werden

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

templateUrl ruft einige Male auf. (dreimal). Probiere console.log aus. ich denke wegen $ scope variables

$ scope.templateUrl = function() { var url = "/ foo /" + $ scope.fooId + "/ bar /" + $ scope.barId + "/ baz/"+ $ scope.bazId; Konsole.log (URL); Rückkehr-URL; }