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

Я использую директиву 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?

Ответ 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

Ответ 2

@jessegavin лучше использовать этот код

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

если вы будете использовать этот способ

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

templateUrl вызывает несколько раз. (3 раза). попробуйте console.log. Я думаю, из-за $var varles

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