Angular ui-router - how to access parameters in nested, named view, passed from the parent template?

前端 未结 2 628
心在旅途
心在旅途 2020-11-28 04:03

Hi I am trying to access a parameter in the controller \"ViewWorklogCrtl\" while using ui-router and running into difficulty.

Basically, my parent template contains

相关标签:
2条回答
  • 2020-11-28 04:26

    The instanceID is declared as an parameter, so we can access it like this

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

    All the other details could be found here https://github.com/angular-ui/ui-router/wiki/URL-Routing

    And the call to ui-sref should be like this

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

    Extend:

    In case that we would like to get two parameters, 1) instanceID from the parent 2) testnum from the current, we have to adjust the state defintion like this

    .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'
          }
      }
    

    And the ui-sref

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

    And we can access it like this:

    .controller('ViewWorklogCrtl',
        [       '$scope','$stateParams'
        function($scope , $stateParams ) {    
            // 
            console.log($stateParams.instanceID)
            console.log($stateParams.testnum)
            ...
    
    0 讨论(0)
  • 2020-11-28 04:32

    I have written a custom directive to solve this problem.

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

    You can clone it from Github: https://github.com/JensEger/Angular-Directives/tree/master/ui-router-helper

    0 讨论(0)
提交回复
热议问题