ui-router modèle dynamique chemin

Je suis à l'aide de l'interface utilisateur du routeur 0.2.8. Je suis désireux de charger un modèle basé sur la largeur de l'appareil. Je peux obtenir la largeur de l'appareil sans problème, définissez dans le champ d'application, etc, mais je peux comprendre comment le lier à $stateParams. J'ai la portée de la variable dans un autre contrôleur qui peut être consulté à l'état du contrôleur, il est tout simplement pas disponible à l'état lui-même. J'ai essayé de la templateProvider mais c'est seulement de me retourner une chaîne de caractères. Quoi d'autre 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"
  })

InformationsquelleAutor Jimi | 2014-05-07

angular-ui-router angularjs

12

Vous pouvez accéder à l'état params dans le $stateChangeStart événement. Vous pouvez également mettre à jour dynamiquement le templateUrl il ainsi.

Alors peut-être que votre code pourrait ressembler à quelque chose comme ceci:
```
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 jeter un oeil à la onEnter de rappel pris en charge par l'interface utilisateur.routeur. Je n'ai pas utilisé cela avant, mais il pourrait être plus soignée que de mettre votre modèle de génération de code dans le $stateChangeStart événement.
- merci pour la réponse, il fonctionne très bien, très apprécié.
- C'est une bonne réponse, mais il casse l'idée de l'INTERFACE utilisateur du Routeur configuration de l'état. Au lieu de maintenir tous les états dans une Config bloc, vous avez de la séparation de configuration dans plusieurs endroits qui ne fera que causer des maux de tête en bas de la route. Voir Dipesh Kc réponse à un plus configurable et facilement maintenable solution.
InformationsquelleAutor biofractal
90

Vous pourriez être à la recherche pour le nom du modèle de dynamique basée sur l'état params
```
 $stateProvider.state('contacts', {
   templateUrl: function ($stateParams){
     return '/partials/contacts.' + $stateParams.filterBy + '.html';
   }
 })
```
Voir la documentation pour plus d'informations
https://github.com/angular-ui/ui-router/wiki#templates
- Génial réponse @Dispesh!
- Ce doit être la accepté de répondre à
- Tout en étant la "bonne" solution, en utilisant seulement le injecté $stateParams pourrait ne pas être suffisant dans certains cas. Donc @biofractal 's réponse pourrait être le cas plus général soluton
- Il est également possible de définir des templateUrl à une injection de fonction à l'intérieur d'un angulaire de la directive? J'imagine qu'il ne l'est pas...?
- Je suis d'accord avec @RicardoPedroni. J'ai dû utiliser l'autre réponse à définir une isMobile variable sur toParams de sorte que la variable est disponible dans templateUrl fonctions via $stateParams. De cette façon, je peux avoir des modèles différents pour les appareils mobiles, de bureau, etc.
- C'est grand, mais il ya un inconvénient, ici, et qu'est ce que Si je veux faire de requête http, avant le rendu de la vue et sur la base du résultat retourné par ce que si je veux changer la vue. Je ne peux pas accéder à l'adresse http dans templateUrl fonction
InformationsquelleAutor Dipesh KC

Cette référence ici a été formidable pour moi de trouver comment faire des modèles dynamiques dans angulaire, mais je voudrais le mettre à jour avec ma propre solution.

Solution 1 basé sur Dipesh Kc (cela fonctionne très bien pour la redéfinition de parent templateUrl pour les états abstraits) Notez que 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 sur la base d'biofractal de l' (il n'y a aucun moyen de mettre à jour un parent templateUrl à 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;
        }
    }
});

InformationsquelleAutor lastlink

Vous devez vous connecter pour publier un commentaire.