Sending multiple params in the Angular UI Router without specifying a url?

Question

I have an application with two states. State1 has no modal dialog box, and State2 has a custom modal box. If I click the browser back button when the State2 modal window is up, it'll take me back to the previous state, State1. I don't want this (because if you open and close the modal multiple times, the browser will go back for all of these). Removing the URL in the UI router takes care of that problem, but I have another one.

I need to send multiple parameters through to the states, but apparently it will only let me send one. I have the following state.

.state('state2',{
    params: {id: NaN, type: "empty"},
    views:{
        'modalContent':{
            templateUrl: 'templates/modal-content-super-region.html',
            controller: 'ModalStatesCtrl'
        }
    }
})

And the following directive:

<a ui-sref="state2({id: 1, type: 'someStringHere'})">The link</a>

When I console log $stateParams, I get the following:

{ id: 1, type: "empty"}

So directive is passing in the id correctly but not setting the type at all, with the passed in type still remaining at it's default value. Is there anything I can do? Without a URL (which I definitely can't have) can I only pass in one state parameter?

Radim Köhler · Accepted Answer · 2015-07-25 04:15:31Z

There is a working plunker. And I have to say, that it seems, that your example, your expactation is working as is. Maybe just some typo in code...

So, unchanged state2 and state1 (with url to see some generated href)

// just to have state with standard <a> generated - url is needed
.state('state1', {
  // url is supporting href being generated
  url: "/state1",
  params: {
    id: NaN,
    type: "empty"
  },
  views: {
    'modalContent': {
      templateUrl: 'templates/modal-content-super-region.html',
      controller: 'ModalStatesCtrl'
    }
  }
})
// unchanged state def
.state('state2', {
  params: {
    id: NaN,
    type: "empty"
  },
  views: {
    'modalContent': {
      templateUrl: 'templates/modal-content-super-region.html',
      controller: 'ModalStatesCtrl'
    }
  }
});

and this is the way they are called and passing params:

<a ui-sref="state1({id: 1, type: 'someStringHere'})">
<a ui-sref="state2({id: 22, type: 'someOtherHere'})">

Check it here

Collectives™ on Stack Overflow

Sending multiple params in the Angular UI Router without specifying a url?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related