将来自控制器的功能放在服务中并使用来自另一个控制器的这些功能

Question

我基本上是在尝试学习如何在另一个控制器中使用一个控制器的功能。控制器之间共享。我有一个控制器 ShopCartCtrl，里面有 3 个功能（openViewCart、goToCheckout、关闭）

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();
      }

   }
]);

我有一项服务：

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

我想在另一个名为 IceCreamCtrl

的控制器中调用这 3 个函数

 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
      }

   }
]);

但我一直认为 ShoppingCart.openViewCart 不是一个函数。我想我可能设置不正确，但我无法弄清楚 what.How 我是否正确地将第一个控制器的功能设置到服务中以及如何从第二个控制器正确调用它？

Answer 1

如果您正在使用 UI-router，您可以使用子状态和嵌套视图来执行此操作，并且您的子状态（如果视图是嵌套的）将从其父级的范围继承。

因此，您将拥有一个控制器，例如 CreamShopCtrl，您可以在其中定义希望子状态继承的所有方法，然后您可以从子状态中调用这些方法。

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

否则，如果您想坚持己见并使用服务，您应该定义一个具有您的功能的服务，然后将这些功能分配给控制器中的范围。

例如：

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

我不知道我自己是否会推荐这种方法，但它会工作得很好。

将来自控制器的功能放在服务中并使用来自另一个控制器的这些功能

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

service

controllers

angularjs