Angular ui-router - ¿cómo acceder a los parámetros en la vista anidada con nombre, pasados desde la plantilla principal?
Hola estoy intentando acceder a un parámetro en el controlador "ViewWorklogCrtl" mientras uso ui-router y me encuentro con dificultades.
Básicamente, mi plantilla padre contiene:
a(ui-sref="instance-ticket.worklog({id:{{ticket.testnum}}})") show
Y luego más abajo en la página:
section(ui-view="top-section")
Entonces en mi aplicación.js, que contiene información de enrutamiento del lado del cliente en resumen, tengo:
$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'
}
}
})
La carga de la plantilla está funcionando correctamente, el problema y la pregunta a la que no puedo encontrar una respuesta es-cómo acceder a "testnum" que se pasa a través de la interfaz de usuario-sref enlace, hacia y dentro de ViewWorkLogCtrl... ¿Hay un mejor enfoque para esto?
Muchas gracias!!!
2 answers
El instanceID
se declara como parámetro, por lo que podemos acceder así
.controller('ViewWorklogCrtl',
[ '$scope','$stateParams'
function($scope , $stateParams ) {
//
$scope.instanceID = $stateParams.instanceID;
...
Todos los demás detalles se pueden encontrar aquí https://github.com/angular-ui/ui-router/wiki/URL-Routing
Y la llamada a ui-sref
debe ser así
<a ui-sref="instance-ticket.worklog({ instanceID:ticket.testnum })" >..
Extender:
En caso de que nos gustaría obtener dos parámetros, 1) InstanceID del padre 2) testnum del actual, tenemos que ajustar la definición de estado de esta manera
.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'
}
}
Y el ui-sref
<a ui-sref="instance-ticket.worklog({ instanceID:1, ticket.testnum:2 })" >..
Y podemos acceder así:
.controller('ViewWorklogCrtl',
[ '$scope','$stateParams'
function($scope , $stateParams ) {
//
console.log($stateParams.instanceID)
console.log($stateParams.testnum)
...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-13 18:25:52
He escrito una directiva personalizada para resolver este problema.
<a my-sref="{{myStateVar}}">awesome link</a>
Puedes clonarlo desde Github: https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-19 10:20:20