How can I pass an object through $stateParams?

Question

I've got a ui-router application with a large number of states, and I need to be able to pass a model through $stateParams. On every $http request, I check the response for a "STATE" parameter, which is returned from the server. If it exists, I execute $state.go(STATE).

So effectively, I've got my $stateProvider:

$stateProvider
    .state('Account', {url: '/Account', template: '<ui-view/>'})
    .state('Account.name', {
        url: '/Name',
        templateUrl: 'app/Account/partials/Name.html',
        controller: 'AccountNameController as nameVm'
    })

And many more states that look just like this.

I have a data model that is just a factory with an object that is get and set via functions. So whenever I call saveAccount(), it takes the model and sends it to a Web API backend. The backend verifies the data and sends it back with a STATE parameter (either account.invalid, account.valid, or account.needsMoreInfo). Here's my $httpInterceptor

.factory('httpInterceptor', ['$q', '$injector',
        function ($q,$injector) {
            return {
                'response': function(response) {
                    if(response.data.state){
                        $injector.get('$state').go(response.data.state, response.data.account);
                    }
                    return response;
                }
            };
        }
    ])

As you can see, I'm trying to send the account through the stateparams.

In the controller, I basically need to be able to say vm.account = $stateParams.account

My question is:

How can I modify my $states to both have a named controller and also take a state parameter and access that from the controller?

The reason I'm not passing the data through a service is because there are multiple models, so I can't just provide the name of the service in the $httpInterceptor because it isn't constant.

EDIT: Figured it out

Here's what my controller needed to have in it: if ($stateParams && $stateParams.data){ vm.Account = $stateParams.data; }

And here's what the state ended up looking like:

.state('taxAccount.invalid', {
            url: '/Invalid?params',
            templateUrl: 'app/TaxAccount/partials/Invalid.html',
            controller: 'taxAccountInvalidController as invalidVm',
            params:{data:null}
        })

I didn't realize I could put params:{data:null}. I thought the stateParams had to go in the controller declaration in the state configuration.

Answer 1

Here's what my controller needed to have in it: if ($stateParams && $stateParams.data){ vm.Account = $stateParams.data; }

And here's what the state ended up looking like:

.state('taxAccount.invalid', {
            url: '/Invalid?params',
            templateUrl: 'app/TaxAccount/partials/Invalid.html',
            controller: 'taxAccountInvalidController as invalidVm',
            params:{data:null}
        })

I didn't realize I could put params:{data:null}. I thought the stateParams had to go in the controller declaration in the state configuration.