Passing state params between child states with same controller

Question

Working on a project and it is the first time implementing ui-router. The situation is, I have parent child states and all childs share same controller because all are working on same domain(CRUD).

The problem is, I am on list page where I click edit option and then state changes to

/states/edit/1

Fine, but all my list, edit and update functions are in same controller. When state changes to states.edit I want to be able to pass parameters from list child state

states.list

to

states.edit

I am unable to get params in edit state. Here is the code:

$stateProvider.state('/dashboard', {
                    url: "/",
                    templateUrl: "/partials/dashboard.html"
                })
                .state('states', {
                    abstract:true,
                    url: "/states",
                    templateUrl: "/partials/manage-state.html",
                    controller:"stateManagementContrlr"
                })
                .state('states.list', {
                    url: "",
                    templateUrl: "/partials/state.list.html"
                })
                .state('states.create', {
                    url: "/create",
                    templateUrl: "/partials/create-state.html"
                })
                .state('states.edit', {
                    url: "/edit/:stateId",
                    templateUrl: "/partials/create-state.html",
                })

What am I doing wrong ? Problem 1: How to get stateParams passed from one child state to another. Problem 2 : How to trigger a function when state changes?(State change listener good idea ?)

Be carefull I want to handle all this with one controller only . Please help me Thanks!

Listening to the state change events will work, but why do you want to handle this with one controller only? — muenchdo, Oct 24 '15 at 10:20
I am managing a country states, I am doing a create,update,delete for states only, So one controller can manage all these. But yes, I am unable to get stateParams. Don't know why! — 89n3ur0n, Oct 24 '15 at 10:32

Brakebein · Accepted Answer · 2015-10-24T11:06:09.763

0

The controller is applied to states, so when you change from states.list to states.edit the controller won't die. Just declare a variable in the controller to save your params var params = {...};

To trigger function you could either call a function via ng-click

$scope.editEntry = function(id) {
  params.id = id;
  $state.go('states.edit');
};

or have a look at those state change events: State Change Events

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ ... })

EDIT:

I just see you can also populate the stateParams with $state.go()

$scope.editEntry = function(id) {
  $state.go('state.edit', {stateId: id});
};

edited Oct 24 '15 at 11:06

answered Oct 24 '15 at 10:58

Brakebein

2,197
1
16
21

page refresh would vanish everything ? – 89n3ur0n Oct 24 '15 at 12:32
Okay, answer helps, but what I am thinking now is, let the states manage states only like States > Cities and each have their own scope of manageing. Rest I will do with direct methods and modal Instances. Good? – 89n3ur0n Oct 24 '15 at 12:53

score 0 · Answer 2 · edited May 23 '17 at 12:03

I would go with state nesting. In general, we can still have list view visible, while navigating to some detail, or edit:

.state('states', {
    abstract:true,
    url: "/states",
    templateUrl: "/partials/manage-state.html",
    controller:"stateManagementContrlr"
})
.state('states.list', {
    url: "",
    templateUrl: "/partials/state.list.html"
})
.state('states.list.create', {
    url: "/create",
    templateUrl: "/partials/create-state.html"
})
.state('states.list.edit', {
    url: "/edit/:stateId",
    templateUrl: "/partials/create-state.html",
})

In such solution, we need a placeholder "<div ui-view></div>" somewhere in the parent 'states.list' template: "/partials/state.list.html"

Or, we can also replace that with absolute name targeting

.state('states.list.create', {
    url: "/create",
    views: {
      '@states': {
          templateUrl: "/partials/create-state.html"
       }
    }
})
.state('states.list.edit', {
    url: "/edit/:stateId",
    views: {
      '@states': {
          templateUrl: "/partials/create-state.html",
       }
    }        
})

And what we gain if the parent will be 'states.list' and 'states.list.edit' will be a child? Well we can star to share date via native UI-Router inheritance. See more here:

Passing state params between child states with same controller

2 Answers2