AngularJS: ngInclude и динамические URL-адреса

Question

Я использую директиву ngInclude для загрузки фрагментов HTML. Теперь я ищу лучший способ передать динамический URL. Я знаю, что могу создать URL-адрес с конкатенацией строк:

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

В моих глазах это немного уродливо.

ngHref и ngSrc например, принимать URL-адреса, содержащие {{}} разметку. ИМХО этот синтаксис намного чище:

<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 varibles

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