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!!!

Author: hzane, 2014-01-13

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)
        ...
 105
Author: Radim Köhler,
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

 4
Author: Jens Eger,
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