AngularJS：ngインクルードとダイナミックURL

Question

ngIncludeディレクティブを使用してHTMLフラグメントをロードしています。今、動的URLを渡す最善の方法を探しています。私は文字列連結でURLを作成できることを知っています：

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

私の目では、これは少し醜いです。

ngHrefとなどは、たとえば、{{}}マークアップを含むURLを受け入れます。 IMHOこの構文ははるかにクリーンです：

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

動的URLをngIncludeに渡すより良い方法はありますか？

Answer 1

これが「良い」かどうかわかりませんが、スコープに関数を作成してこれをカプセル化することができます。

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

は、その後、あなたがそうのようにそれを使用することになり...

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

はここのもののこのタイプのライブの例です：http://plnkr.co/edit/Lu3icqPgg1dpNCj6a3Dn?p=preview

Answer 2

@jessegavinは、このコード

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

を使用する方が良いです

この方法を使用する場合

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

templateUrlが数回呼び出します。 （3回）。 console.logを試してください。 $ scope.fooId + "/ bar /" + $ scope.barId + "/ bar /"/bar/"/ var/baz/$ bar /"/var/baz/"+ $ scope.bazId; console.log（url）; return url; }