Platzieren Sie Funktionen vom Controller in einem Service und verwenden Sie diese Funktionen von einem anderen Controller

Question

Ich versuche im Grunde zu lernen, wie man Funktionen von einem Controller in einem anderen verwendet. Freigabe zwischen den Controllern Ich habe einen Controller ShopCartCtrl mit 3 Funktionen innerhalb (openViewCart, goToCheckout, in der Nähe)

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

    } 
]); 

Ich habe einen Dienst:

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

Und ich möchte diese drei Funktionen in einem anderen Controller IceCreamCtrl nennen

genannt

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 
     } 

    } 
]); 

Aber ich bekomme immer, dass ShoppingCart.openViewCart keine Funktion ist. Ich denke, ich habe etwas falsch eingerichtet, aber ich kann nicht herausfinden, was. Wie stelle ich die Funktionen vom ersten Controller in den Dienst richtig und wie rufe ich es richtig vom zweiten Controller?

Answer 1

Wenn Sie einen UI-Router verwenden, können Sie untergeordnete Status und verschachtelte Ansichten verwenden, und Ihr untergeordneter Status (wenn die Ansichten verschachtelt sind) erbt vom Bereich des übergeordneten Elements.

Sie hätten also einen Controller, zum Beispiel CreamShopCtrl, in dem Sie alle Methoden definieren, die Ihr Kind erben soll, und dann können Sie diese Methoden innerhalb Ihrer Child States aufrufen.

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

---

Andernfalls, wenn Sie Ihre Waffen halten wollen und einen Service verwenden Sie einen Service definieren sollten, die Ihre Funktionen hat, und dann diese Funktionen zu Ihrem Umfang in Ihrem Controller zuweisen.

Zum Beispiel:

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

Ich weiß nicht, ob ich diesen Ansatz selbst würde empfehlen, aber es wird gut funktionieren.