How to pass scope variable data from one state to another using Angular ui-router?

Question

I have two states as follows:

  .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('my.list', {
          url: '/myitem',
          templateUrl: 'templates/my-item-list.html',
          controller: 'myController'
        })

        .state('my.detail', {
          url: '/detail',
          templateUrl: 'templates/item-detail.html',
          controller: 'myController'
        })

In my-item-list.html I have used ng-repeat to list items, which are clickable.

On click the state changes to my.detail where I want to display details of selected/clicked item.

How to pass clicked data from one state to another? What would be best approach to follow? without displaying params in URL?

tanmay · Accepted Answer · 2017-03-25 09:40:43Z

1

Best approach while navigating from one state to another on click of a link is by using ui-sref and you can pass params with it like:

<a ... ui-sref="my.detail({selected: 'something'})" ...>...</a>

In order to make that work, you need selected to be part of params in that state. Like this:

    .state('my.detail', {
      url: '/detail',
      params: {selected: null},
      templateUrl: 'templates/item-detail.html',
      controller: 'myController'
    })

Now, you can use that in your myController using $stateParams.selected.

edited Mar 25, 2017 at 9:40

answered Mar 25, 2017 at 9:06

tanmay

7,9112 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3767923 Over a year ago

will it be same using $state.go('my.detail');

tanmay Over a year ago

ui-sref can be used in HTML like <a ... ui-sref="my.detail({...})"..>..</a>.. if you have direct navigation, you should use ui-sref, if you have any logic written in controller and then based on that you are changing states, then you should use $state.go('my.detail', {...}) in controller

tanmay Over a year ago

@SystemMGR you can find more on ui-sref here. It's very simple to use.

user4596341 Over a year ago

This solution looks easy but I am using JSON data to render in list (ng-repeat), how can I pass this data to details state?

tanmay Over a year ago

@Thanos ask your question seperately mentioning the issues you have and I could help you out

|

Collectives™ on Stack Overflow

How to pass scope variable data from one state to another using Angular ui-router?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related