ruta de la plantilla dinámica de ui-enrutador

Estoy usando ui-router 0.2.8. Quiero cargar una plantilla basada en el ancho del dispositivo. Puedo obtener el ancho del dispositivo sin problema, configurarlo en el scope, etc. pero puedo averiguar cómo vincularlo a $ stateParams. Tengo la variable de ámbito en otro controlador al que se puede acceder el controlador del estado, simplemente no está disponible para el estado en sí. He probado el templateProvider pero eso solo me está devolviendo una cadena. ¿Qué más puedo probar para que esto funcione?

.state('list', { abstract: true, url: "/list", templateUrl: 'views/'+$stateParams.somevalue+'/page.html', controller: "myCtrl" }) .state('list.first', { url: "/first", templateUrl: "views/first.html" }) 

Puede acceder a los parámetros de estado en el evento $stateChangeStart . También puede actualizar dinámicamente la templateUrl allí también.

Entonces quizás su código se vea más o menos así:

 angular.module('app', ['ui.router']) .run(function($rootScope){ $rootScope.$on('$stateChangeStart', function(event, toState, toParams) { if (toState.name === 'list') { toState.templateUrl = 'views/'+toParams.somevalue+'/page.html'; } }); } 

También es posible que desee echar un vistazo a la callback onEnter compatible con ui.router. No he usado esto antes, pero podría ser más útil que poner el código generador de la plantilla en el evento $stateChangeStart .

Es posible que esté buscando un nombre de plantilla dynamic basado en los parámetros de estado

  $stateProvider.state('contacts', { templateUrl: function ($stateParams){ return '/partials/contacts.' + $stateParams.filterBy + '.html'; } }) 

Consulte los documentos para obtener más información https://github.com/angular-ui/ui-router/wiki#templates

Esta referencia aquí fue genial para mí, al descubrir cómo hacer plantillas dinámicas en angular, pero me gustaría actualizar con mi propia solución.

  • Solución 1 basada en Dipesh Kc (esto funciona muy bien para redefinir parentUrl padre para estados abstractos) Aviso que utilicé toParams en lugar de $ stateParams:

     // custom parent template .state('template', { abstract: true, url: "/tm/:tmfolder/:tmview", templateUrl: function (toParams) { return 'views/' + toParams.tmfolder + '/' + toParams.tmview + '.html'; }, }) .state('template.contacts', { url: "/contacts/:folder/:view", templateUrl: function (toParams) { return 'views/' + toParams.older + '/' + toParams.view + '.html'; }, }) 
  • Solución 2 basada en biofractal (no hay forma de actualizar un templateUrl padre usando este método):

     .state('contact', { url: "/contact/:folder/:view" }) $rootScope.$on('$stateChangeStart', function (event, toState, toParams) { var customStates = ["contact"] for (var i = 0; i < customStates.length; i++) { if (toState.name.indexOf(customStates[i]) != -1) { toState.templateUrl = 'views/' + toParams.folder + '/' + toParams.view + '.html'; break; } } });