showing - AngularJS: ngInclude y URL dinámicas

ng include tag

Question

Estoy usando la directiva ngInclude para cargar fragmentos HTML. Ahora estoy buscando la mejor manera de pasar una URL dinámica. Sé que puedo crear la URL con concatenación de cadenas:

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

En mi opinión esto es un poco feo.

ngHref y ngSrc por ejemplo, aceptan URL que contengan {{}} marcado. En mi humilde opinión, esta sintaxis es mucho más clara:

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

¿Hay una mejor manera de pasar URL dinámicas a ngInclude?

Answer 1

No estoy seguro de si esto es "mejor" o no, pero podría crear una función en su alcance para encapsular esto.

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

Entonces lo usarías así ...

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

Aquí hay un ejemplo en vivo de este tipo de cosas: http://plnkr.co/edit/Lu3icqPgg1dpNCj6a3Dn?p=preview

Answer 2

@jessegavin es mejor usar este código

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

si usarás de esta manera

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

templateUrl llama algunas veces. (3 veces). prueba console.log. creo que debido a $ varibles alcance

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