CODEWITHSUNDEEP
angularjsangular-ui-router
Alex Kibler
Alex Kibler

Reputation: 4954

How to pass data between angular ui-router states?

I'm developing a simple shopping cart tracking application to expand my knowledge of ui-router. I have eight different possible states, and each state has its own controller. Here is my app.config file where you can see the state definitions:

module.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state("empty", { templateUrl: "app/templates/empty.html", controller: 'emptyController', controllerAs:'vm' })
        .state("initial", { templateUrl: "app/templates/initial.html", controller: 'initialController', controllerAs: 'vm' })
        .state("shopping", { templateUrl: "app/templates/shopping.html", controller: 'shoppingController', controllerAs: 'vm' })
        .state("shipping", { templateUrl: "app/templates/shipping.html", controller: 'shippingController', controllerAs: 'vm' })
        .state("billing", { templateUrl: "app/templates/billing.html", controller: 'billingController', controllerAs: 'vm' })
        .state("review", { templateUrl: "app/templates/review.html", controller: 'reviewController', controllerAs: 'vm' })
        .state("confirmation", { templateUrl: "app/templates/confirmation.html", controller: 'confirmationController', controllerAs: 'vm' })
        .state("error", { templateUrl: "app/templates/error.html", controller: 'errorController', controllerAs: 'vm' })
    $locationProvider.html5Mode(true);
    $urlRouterProvider.otherwise("/");
})

I'm trying to track the 'cart' using an object called cart, defined in a factory:

function cart() {
    var factory = {};

    factory.model = {};

    return factory;
}

On my navbar, I have ui-sref's to change the state:

<li ui-sref-active="active"><a ui-sref="empty">Empty</a></li>
<li ui-sref-active="active"><a ui-sref="initial">Initial</a></li>
<li ui-sref-active="active"><a ui-sref="shipping">Shipping</a></li>
<li ui-sref-active="active"><a ui-sref="billing">Billing</a></li>
<li ui-sref-active="active"><a ui-sref="review">Review</a></li>
<li ui-sref-active="active"><a ui-sref="confirmation">Confirmation</a></li>
<li ui-sref-active="active"><a ui-sref="error">Error</a></li>
<li ui-sref-active="active"><a data-toggle="modal" data-target="#login-modal">Log in</a></li>

Whenever I change state, I need to transfer the entire cart.model to the new state. How can I do this? My controllers each look like this: 

(function () {
    "use strict";

    angular.module('ShoppingCart')
        .controller('emptyController', ['cart', emptyController]);

    function emptyController(cart) {
        var vm = this;
        vm.model = cart.model;
    };
}());

I'm trying to get the cart's model, but I'm not sure how I can update it on state change.

Upvotes: 0

Views: 169

Answers (3)

Vaibhav Pachauri
Vaibhav Pachauri

Reputation: 2671

If you want to move data from one state to another state you can do the following :

$state.go('toStateName', {id1 : 'dataToPass'}); //using javascript
<a ui-sref="toStateName({id1 : 'dataToPass'})">To New State</a>

and in the definition of 'toStateName' you can access these parameters using $stateParams service.

$stateProvider.state('toStateName', {
url: '/tostate',
params: {id1 : {}},
templateUrl: 'templates/send-to.html',
controller: 'SendToCtrl'
})

I hope this will do.

For more information look at the following link :

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Upvotes: 1

Alex Kibler
Alex Kibler

Reputation: 4954

I believe I figured it out. What I was doing wrong was referring to it as cart.model.whatever in my html pages. by switching to vm.model.whatever and leaving everything else the same, it started working.

Upvotes: 0

GPicazo
GPicazo

Reputation: 6676

It sounds like you have the right idea of using a factory to keep the model. Since .factory and .service are singletons in angularjs, then you shouldn't have to worry about 'passing' the cart model around. Basically, anytime you enter a state, a controller instance is created that gets the cart factory injected into it. When you change states, a different controller is instantiated, and the SAME cart factory instance is injected, meaning that you should have access to the same cart.model as you had in the previous state.

Upvotes: 2

Related Questions