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?

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.