percorso template dinamico ui-router

Question

Sto usando ui-router 0.2.8. Sto volendo caricare un modello basato sulla larghezza del dispositivo. Posso ottenere la larghezza del dispositivo senza problemi, impostarla nello scope ecc. Ma posso capire come associarlo a $ stateParams. Ho la variabile scope in un altro controller a cui è possibile accedere al controller dello stato che non è appena disponibile per lo stato stesso. Ho provato il templateProvider ma questo mi restituisce solo una stringa. Cos'altro posso provare per farlo funzionare?

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

Answer 1

È possibile accedere a params statali in caso $stateChangeStart. È anche possibile aggiornare dinamicamente lo templateUrl anche qui.

Quindi, forse, il codice potrebbe essere simile a questa:

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

Si potrebbe anche voler dare un'occhiata al onEnter callback supportato da ui.router. Non l'ho mai usato prima, ma potrebbe essere più ordinato che inserire il codice di generazione del template nell'evento $stateChangeStart.

Answer 2

Si potrebbe essere alla ricerca di nome del modello dinamico in base allo stato params

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

Vedere la documentazione per ulteriori informazioni https://github.com/angular-ui/ui-router/wiki#templates

Answer 3

Questo riferimento qui è stato fantastico per me capire come fare modelli dinamici in angolare, ma mi piacerebbe aggiornare con la mia soluzione.

• Soluzione 1 sulla base di Dipesh Kc di (Questa grande opera per ridefinire TemplateURL genitore per stati astratti) Si noti che ho usato toParams invece di $ 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'; 
      }, 
  }) 
  

• Soluzione 2 sulla base biofractal di (non c'è non c'è modo di aggiornare un TemplateURL genitore con questo metodo):

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