web-dev-qa-db-fra.com

chemin du template dynamique ui-router

J'utilise ui-router 0.2.8. Je souhaite charger un modèle basé sur la largeur du périphérique. Je peux obtenir la largeur du périphérique sans problème, le définir dans la portée, etc., mais je peux comprendre comment le lier à $ stateParams. J'ai la variable de portée dans un autre contrôleur auquel on peut accéder par le contrôleur de l'état, ce n'est simplement pas disponible pour l'état lui-même. J'ai essayé le templateProvider mais cela ne me renvoie qu'une chaîne. Que puis-je essayer pour que cela fonctionne?

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

Vous pouvez accéder aux paramètres d'état dans l'événement $stateChangeStart. Vous pouvez également mettre à jour la variable templateUrl de manière dynamique.

Alors peut-être que votre code pourrait ressembler à quelque chose comme ça:

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

Vous pouvez également consulter le callback onEnter supporté par ui.router. Je n'ai jamais utilisé cela auparavant, mais il serait peut-être plus judicieux de placer votre code de génération de modèle dans l'événement $stateChangeStart.

12
biofractal

Vous recherchez peut-être un nom de modèle dynamique basé sur les paramètres d'état

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

Reportez-vous à la documentation pour plus d'informations https://github.com/angular-ui/ui-router/wiki#templates

90
Dipesh Kc

Cette référence ici a été excellente pour moi, qui a expliqué comment créer des modèles dynamiques dans un angle, mais j'aimerais mettre à jour avec ma propre solution.

  • Solution 1 basée sur Dipesh Kc's (cela fonctionne très bien pour redéfinir templateUrl parent pour les états abstraits) Avis: J'ai utilisé toParams au lieu 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';
    },
})

  • Solution 2 basée sur biofractal (il n'y a aucun moyen de mettre à jour un templateUrl parent à l'aide de cette méthode):

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