Place functions from controller in a service and use those functions from another controller

Question

I am basically trying to learn how to use functions from one controller in another. Sharing between controllers. I have a controller ShopCartCtrl with 3 functions inside (openViewCart, goToCheckout, close)

creamShopControllers.controller('ShopCartCtrl', ['$scope', '$state', '$uibModal', 'ngCart', '$http', '$uibModalInstance', 'ShoppingCart',
 function ShopCartCtrl($scope, $state, $uibModal, ngCart, $http, $uibModalInstance, ShoppingCart) {
 console.log("Hitting ShopCartCtrl!");
 ngCart.setTaxRate(7.5);
 ngCart.setShipping(2.99);
 ShoppingCart.openViewCart = function () {
 $uibModal.open({
 templateUrl: 'pages/shopping_cart_modal.html',
 clickOutsideToClose: true,
 })
 }
 ShoppingCart.goToCheckout = function () {
 $state.go('checkout', {});
 }
 ShoppingCart.close = function () {
 $uibModalInstance.close();
 }
 }
]);

I have a service:

creamShopServices.factory('ShoppingCart', [
 function () {
 return {
 openViewCart: null,
 goToCheckout: null,
 close: null
 }
 }
]);

And I would like to call those 3 functions in another controller called IceCreamCtrl

 creamShopControllers.controller('IceCreamCtrl', ['$scope', '$state', 'ShoppingCart', 'IceCream', 'AllIceCreams',
 function ($scope, $state, ShoppingCart, IceCream, AllIceCreams) {
 AllIceCreams.get({}, function (result) {
 console.log("Fetched all ice cream");
 $scope.allIceCream = result;
 }, function (err) {
 console.log("Error on GET All Ice Cream")
 });
 $scope.viewCart = function(){
 ShoppingCart.openViewCart(); //TYPEERROR: ShoppingCart.openViewCart is not a function
 }
 }
]);

But I keep getting that ShoppingCart.openViewCart is not a function. I think I might have set something up incorrectly but I cannot figure out what.How do I properly set the functions from the first controller into the service and how do I properly call it from the second controller?

• JB Nizet: Why do you define the functions of the service in the first controller, instead of defining them in the service?
• truffle: Let's say you had helper functions in ShopCartCtrl or variables that you needed and so you just want to be able to reference the function from the service instead of defining it in the service. How would you do that?
• JB Nizet: @RomainVincent no, you won't. AngularJS services are singletons.
• georgeawg: It is not wise to configure a service instance object from a controller. It creates an unnecessary and unreliable dependence. Controllers are instantiated and destroyed as DOM is created and destroyed. Their order of instantiation is not guaranteed. All the configuration should be done in the service construction function. Refactor the code and place the functions you want to share in that construction function.

Answer 1

If you're using UI-router you can use child states and nested views to do this and your child states (if the views are nested) will inherit from the scope of its parent.

So you would have one controller, for example's sake CreamShopCtrl where you define all the methods you want your child states to inherit and then you can call those methods from within your child states.

https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

---

Otherwise if you want to stick to your guns and use a service you should define a service that has your functions, and then assign those functions to your scope in your controller.

For instance:

.controller('ShopCartCtrl', function ($scope, ShoppingCartService) {
 $scope.openViewCart = ShoppingCartService.openViewCart;
});

I don't know if I would recommend this approach myself but it will work just fine.