2017-02-27 11 views
0

基本的に、あるコントローラの機能を別のコントローラに使用する方法を学びます。コントローラ間の共有。コントローラの機能をサービス内に配置し、別のコントローラの機能を使用する

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

そして、私はIceCreamCtrl

と呼ばれる別のコントローラでこれらの3つの機能を呼び出すしたいと思います:私は、私はサービスを持っている内部の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(); 
     } 

    } 
]); 

とコントローラShopCartCtrlを持っています

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が機能ではないということを続けています。私は間違って何かを設定したかもしれないと思いますが、何が分かりませんか。最初のコントローラの機能をサービスに正しく設定するにはどうしたらいいですか?

+2

サービス内でサービスの機能を定義するのではなく、最初のコントローラでサービスの機能を定義するのはなぜですか? –

+0

ShopCartCtrlや必要な変数でヘルパー関数を使用していて、その関数をサービスで定義するのではなく、サービスから参照できるようにしたいとします。あなたはどうしますか? – truffle

+2

@RomainVincentいいえ、あなたはしません。 AngularJSサービスはシングルトンです。 –

答えて

2

UI-routerを使用している場合は、子ステートと入れ子ビューを使用してこれを行うことができ、子ステート(ビューがネストされている場合)は親のスコープから継承されます。

コントローラが1つあるとします。例えば、CreamShopCtrlのように、子ステートに継承するすべてのメソッドを定義し、それらのメソッドを子ステート内から呼び出すことができます。

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


そうしないと、あなたの銃に固執し、あなたの機能を持つサービスを定義して、あなたのコントローラであなたのスコープにこれらの機能を割り当てる必要がサービスを利用したい場合。例えば

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

私はこのアプローチを自分自身をお勧めしますが、それはうまく動作するかどうか、私は知りません。

関連する問題