Passing multiple parameters to state in the path

Question

I have this state definition:

         .state("workPlan.list", {
             url: "MainPage",
             templateUrl: "app/workPlan/templates/workPlanList.tmpl.html",
             controller: "workPlanListController",
             controllerAs: "list",
             resolve: {
                 workPlans: ["workPlanServise", workPlanServiseResolver],
                 inspectionAuthority: ["lookupService", inspectionAuthorityResolver],
                 clients: ["lookupService", ClientsResolver]
             }
         })

The current path is:

/cities#/MainPage

I need to pass in URL some data:

 'Table':'Clients'
 'Key':'Name'
 'Value':'ClientId'

 'Table':'Dates'
 'Key':'Desc'
 'Value':'DateId'

 'Table':'Sites'
 'Key':'SiteName'
 'Value':'SiteId'

I need to send the data above in URL path:

/cities#/MainPage?{'Table':'Clients','Key':'Name','Value':'ClientId'}{...}{...}

then in state definition I need to use it in resolve function.

So my question is it possible to send the data in the path in format above and how can I access it in resolves function.

score 2 · Answer 1 · answered Nov 17 '15 at 10:15

2

Of course you can do it, everything is in the documentation: ui-router github wiki

You will define your state URL with parameters (double colon - e.g. ":table"), and use $stateParams service in resolve function:

$stateProvider
.state('contacts.detail', {
    url: "/MainPage/:table/:key/:value",
    templateUrl: "app/workPlan/templates/workPlanList.tmpl.html",
    controller: "workPlanListController",
    controllerAs: "list",
    resolve: {
        data: ['$stateParams', function($stateParams) {
            console.log($stateParams.table);
        }]
    }
})

The parameters will be also available in state controller if you inject $stateParams service.

answered Nov 17 '15 at 10:15

Adrian

904
1
11
17

is it possible to send it as JSON? – Michael Nov 17 '15 at 10:17
You can pass stateParams in `ui-sref` as javascript object, so no, I don't think you can. However, you could convert the JSON to string and escape it as necessary... http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref – Adrian Nov 17 '15 at 10:27
but you can go to a state and pass object inside javascript - http://stackoverflow.com/questions/20632255/angularjs-pass-an-object-into-a-state-using-ui-router – Adrian Nov 17 '15 at 10:29

score 2 · Answer 2 · answered Jul 13 '17 at 12:45

calling your state

 $state.go('stateName', {test_one: 'para1',test_two: para2, test_three:'para3'});

or

 window.location.href = 
 this.$state.href('stateName',
 {test_one: 'para1',test_two: para2, test_three:'para3'});

routes.js where you define your state.

 $stateProvider
    .state({
      name: 'stateName',
      url: '/test/?test_one&test_two&test_three',
      views: {
        'content@portal-layout': {
          controller: Controller,
          template: require('./test.html')
        },
      }
    })

finally your url look like this

 https://test/?test_one=para1&test_two=para2&test_three=para3

Passing multiple parameters to state in the path

2 Answers2