caminho do modelo dynamic do roteador ui

Eu estou usando o roteador ui 0.2.8. Eu estou querendo carregar um modelo com base na largura do dispositivo. Eu posso obter a largura do dispositivo sem problema, configurá-lo no escopo etc, mas eu posso descobrir como ligá-lo a $ stateParams. Eu tenho a variável de escopo em outro controlador que pode ser acessado pelo controlador do estado que simplesmente não está disponível para o próprio estado. Eu tentei o templateProvider, mas isso só está me devolvendo uma string. O que mais eu posso tentar para que isso funcione?

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

Você pode acessar para indicar params no evento $stateChangeStart . Você também pode atualizar dinamicamente o templateUrl lá também.

Então, talvez seu código seja parecido com isto:

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

Você também pode querer dar uma olhada no callback onEnter suportado pelo ui.router. Eu não usei isso antes, mas pode ser mais simples do que colocar seu modelo gerando código no evento $stateChangeStart .

Você pode estar procurando por um nome de modelo dynamic com base nos parâmetros do estado

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

Veja os documentos para mais informações https://github.com/angular-ui/ui-router/wiki#templates

Essa referência aqui foi ótima para eu descobrir como fazer modelos dynamics em angular, mas gostaria de atualizar com minha própria solução.

  • Solução 1 com base no Dipesh Kc (isso funciona muito bem para redefinir o templateUrl pai para estados abstratos) Observe que usei toParams em vez 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'; }, }) 
  • Solução 2 baseada em biofractal (não há como atualizar um templateUrl pai 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; } } });