Angular ui-router-comment accéder aux paramètres dans la vue imbriquée, nommée, transmise à partir du modèle parent?
Salut, j'essaie d'accéder à un paramètre dans le contrôleur "ViewWorklogCrtl" tout en utilisant ui-router et en difficulté.
Fondamentalement, mon modèle parent contient:
a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") show
Puis plus bas sur la page:
section(ui-view="top-section")
, Puis dans mon application.js, contenant des informations de routage côté client 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 chargement du modèle fonctionne correctement, le problème et la question auxquels je ne trouve pas de réponse sont: comment accéder à "testnum" en cours de transmission via l'interface utilisateur-sref lien, vers et dans le ViewWorkLogCtrl... Est-il une meilleure approche?
Merci beaucoup!!!
2 réponses
Le instanceID est déclaré en tant que paramètre, donc nous pouvons y accéder comme ceci
.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 de ui-sref devrait être comme ceci
<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)
...
J'ai écrit une directive personnalisée pour résoudre ce problème.
<a my-sref="{{myStateVar}}">awesome link</a>
Vous pouvez le cloner à partir de Github: https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper