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

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

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

Есть ли лучший способ передать динамические 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; }