将控制器中的功能放在服务中,并使用其他控制器中的那些功能

时间:2017-02-27 22:47:41

标签: angularjs service controllers

我基本上试图学习如何使用另一个控制器中的功能。控制器之间共享。我有一个控制器ShopCartCtrl里面有3个函数(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();
      }

   }
]);

我有服务:

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不是一个功能。我想我可能设置错误但我无法弄清楚是什么。如何正确设置从第一个控制器到服务的功能以及如何从第二个控制器正确调用它?

1 个答案:

答案 0 :(得分:2)

如果您正在使用UI路由器,则可以使用子状态和嵌套视图来执行此操作,并且您的子状态(如果视图是嵌套的)将继承其父级的范围。

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

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

否则,如果您想坚持使用枪支并使用服务,则应定义具有功能的服务,然后将这些功能分配给控制器中的示波器。

例如:

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

我不知道自己是否会推荐这种方法,但它会正常工作。