0

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.

Improve this question

3 Answers 3

Reset to default
2

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.

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

3 Comments

Thanks for letting me know I'm on the right track. The issue I'm having is that it doesn't seem to work though.. in empty.html, I have an input whose ng-model is cart.model.input, and on confirmation.html I have a span with {{cart.model.input}}, so shouldn't I be able to type in empty and switch to confirmation to see it?
The scope property is model, not cart -- and you also forgot to reference your controller by name. You should probably be binding to {{vm.model.input}} instead.
Yep, that was totally it. Thanks for your help!
1

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.