web-dev-qa-db-fra.com

Angular ui-router - comment accéder aux paramètres dans une vue nommée imbriquée, transmise depuis le modèle parent?

Bonjour, j'essaie d'accéder à un paramètre du contrôleur "ViewWorklogCrtl" lors de l'utilisation de ui-router et de mes difficultés.

Fondamentalement, mon modèle parent contient:

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

et plus bas sur la page:

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

Ensuite, dans mon app.js, qui contient des informations de routage côté client, 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 chargement du modèle fonctionne correctement, le problème et la question à laquelle je ne trouve pas de réponse est: comment accéder au "testnum" transmis via le lien ui-sref, vers et dans ViewWorkLogCtrl ... Existe-t-il une meilleure approche pour cette?

Merci beaucoup!!!

javascriptangularjsnestedangular-ui-router
59
hzane

Le instanceID est déclaré en tant que paramètre, nous pouvons donc y accéder comme ceci

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

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

Et l'appel à ui-sref devrait être comme ça

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

Étendre:

Dans le cas où nous aimerions obtenir deux paramètres, 1) instanceID du parent 2) testnum du courant, nous devons ajuster la définition d'é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 le ui-sref

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

Et nous pouvons y accéder comme ceci:

.controller('ViewWorklogCrtl',
    [       '$scope','$stateParams'
    function($scope , $stateParams ) {    
        // 
        console.log($stateParams.instanceID)
        console.log($stateParams.testnum)
        ...
105
Radim Köhler

J'ai écrit une directive personnalisée pour résoudre ce problème.

<a my-sref="{{myStateVar}}">awesome link</a>

Vous pouvez le cloner depuis Github: https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper

4
Jens Eger