59 votes

Angulaire ui-router - comment accéder aux paramètres imbriqués, vue nommée, transmis à partir du modèle parent?

Salut, je suis en train d'essayer d'accéder à un paramètre dans le contrôleur "ViewWorklogCrtl" lors de l'utilisation de l'interface utilisateur du routeur et en cours d'exécution dans la difficulté.

Fondamentalement, ma mère modèle contient:

a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") show

et puis en bas de la page:

section(ui-view="top-section")

Ensuite dans mon app.js contenant côté client de routage info en bref j'ai:

 $stateProvider
.state('instance-ticket', {
  url: '/ticket/:instanceID',
  templateUrl: 'partials/instance-ticket',
  controller: 'ViewTicketCrtl'
})
.state('instance-ticket.worklog', {
  views:{
    'top-section':{
      templateUrl:'/partials/ticket.worklog.jade',
      controller: 'ViewWorklogCrtl'
      }
  }
  })

Le modèle de chargement fonctionne correctement, le problème et la question que je ne peux pas trouver une réponse à est - comment accéder à "testnum" transmise par le biais de l'interface utilisateur-sref lien, et à l'intérieur de la ViewWorkLogCtrl... Est-il une meilleure approche?

Merci beaucoup!!!

105voto

Radim Köhler Points 26836

L' instanceID est déclaré comme un paramètre, donc on peut y accéder comme ça

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        $scope.instanceID = $stateParams.instanceID;
        ...

Tous les autres détails pourraient être trouvés ici https://github.com/angular-ui/ui-router/wiki/URL-Routing

Et l'appel à l' ui-sref devrait ressembler à ceci

<a ui-sref="instance-ticket.worklog({ instanceID:ticket.testnum })" >..

L'extension:

Dans le cas que nous aimerions obtenir deux paramètres, 1) instanceID le parent 2) testnum à partir de l'actuel, nous devons ajuster la définition de l'état comme ceci

.state('instance-ticket', {
  url: '/ticket/:instanceID',      // instanceID
  templateUrl: 'partials/instance-ticket',
  controller: 'ViewTicketCrtl'
})
.state('instance-ticket.worklog', {
  // new param defintion
  url: '/worklog/:testnum',         // testnum
  views:{
    'top-section':{
      templateUrl:'/partials/ticket.worklog.jade',
      controller: 'ViewWorklogCrtl'
      }
  }

Et l' ui-sref

<a ui-sref="instance-ticket.worklog({ instanceID:1, ticket.testnum:2 })" >..

Et on peut y accéder comme ceci:

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        console.log($stateParams.instanceID)
        console.log($stateParams.testnum)
        ...

4voto

Jens Eger Points 16

J'ai écrit une coutume directive de résoudre ce problème...
Vous pouvez le copier à partir de Github:
https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X