Intentando establecer dinámicamente una plantillaUrl en el controlador en función de la constante

Quiero cambiar la plantillaUrl asociada con el controlador en función de una constante preestablecida que he definido en mi bootstrap angularjs. No puedo entender cómo cambiar eso. He experimentado con UrlRouteProvider pero no he podido averiguar cómo extraer el html del sistema de archivos con eso. Estoy atascado en templateUrl.

En el siguiente código, el resultado primero muestra que “svcc se pasa efectivamente a la consola console.out de la primera función, pero en la función de definición templateUrl, CONFIG no está definido.

Estoy abierto a otras formas de hacer esto.

var app = angular.module('svccApp', [ 'ui.router' ]); var myConstant = {}; myConstant.codeCampType = "svcc"; app.constant("CONFIG", myConstant); app.config(['$stateProvider', '$urlRouterProvider','CONFIG', function ($stateProvider, $urlRouterProvider,CONFIG) { console.log(CONFIG.codeCampType); $stateProvider .state('home', { url: '/home', //templateUrl: 'index5templateA.html', (THIS WORKS) templateUrl: function(CONFIG) { console.log('in templateUrl ' + CONFIG.codeCampType); if (CONFIG.codeCampType === "svcc") { return 'index5templateA.html'; } else { return 'index5templateB.html'; } }, controller: function ($state) { } }); }]); 

Creé un plunker aquí Estás casi allí, solo la syntax es 'templateProvider' :

 .state('home', { url: '/home', //templateUrl: 'index5templateA.html', (THIS WORKS) // templateUrl: function(CONFIG) { templateProvider: function(CONFIG) { ... 

Fragmento de doc:

Plantillas

TemplateUrl
templateUrl también puede ser una función que devuelve una url. Toma un parámetro preestablecido, stateParams , que NO está inyectado.

TemplateProvider
O puede usar una función de proveedor de plantilla que se puede inyectar, tiene acceso a los locales y debe devolver la plantilla HTML, como esta:

Entonces, en nuestro caso, esa sería la implementación:

  $stateProvider .state('home', { url: '/home', //templateUrl: 'index5templateA.html', (THIS WORKS) templateProvider: function(CONFIG, $http, $templateCache) { console.log('in templateUrl ' + CONFIG.codeCampType); var templateName = 'index5templateB.html'; if (CONFIG.codeCampType === "svcc") { templateName = 'index5templateA.html'; } var tpl = $templateCache.get(templateName); if(tpl){ return tpl; } return $http .get(templateName) .then(function(response){ tpl = response.data $templateCache.put(templateName, tpl); return tpl; }); }, controller: function ($state) { } }); 

Compruebe el examen aquí

También verifique:

  • Enrutador de IU angular: decide la plantilla de estado hijo en función del objeto resuelto por el padre
  • Angular y UI-Router, cómo configurar una plantilla dinámicaUrl

Tengo que agregar otra respuesta, relacionada con la nueva característica de 1.3 angular

$ templateRequest

El servicio $templateRequest descarga la plantilla proporcionada usando $http y, cuando tiene éxito, almacena los contenidos dentro de $templateCache .

Uso

 $templateRequest(tpl, [ignoreRequestError]); 

Argumentos – cadena tpl – La URL de la plantilla de solicitud HTTP

  • ignoreRequestError (opcional) booleano: si se ignora o no la excepción cuando la solicitud falla o la plantilla está vacía

Y actualizado plunker

 templateProvider: function(CONFIG, $templateRequest) { console.log('in templateUrl ' + CONFIG.codeCampType); var templateName = 'index5templateB.html'; if (CONFIG.codeCampType === "svcc") { templateName = 'index5templateA.html'; } return $templateRequest(templateName); }, 
  var app = angular.module('svccApp', [ 'ui.router' ]); var myConstant = {}; myConstant.codeCampType = "svcc"; app.config(['$stateProvider', '$urlRouterProvider','CONFIG', function ($stateProvider, $urlRouterProvider,CONFIG) { console.log(CONFIG.codeCampType); $stateProvider .state('home', { url: '/home', //templateUrl: 'index5templateA.html', (THIS WORKS) templateUrl: function() { if (myConstant.codeCampType === "svcc") { return 'index5templateA.html'; } else { return 'index5templateB.html'; } }, controller: function ($state) { } }); }]);