2016-04-05 9 views
0

コントローラ内でサービスを渡そうとしましたが、少し問題があります。1つのコントローラから別のコントローラへの角度情報のパス

私がやっていることはショッピングカートです。私はアイテムのリストを持っています。ボタンを押すと、それらのアイテムがカートに追加されます。そして、それらのアイテムをカート内の別のページを別のコントローラを使用しているので、カート用のファクトリを使用しようとしていますが、コントローラ内にファクトリオブジェクトを設定できるかどうかはわかりません。

ここに私のコードは、あなたが正しい方向に私を指すことができることを願っています。

var app = angular.module("Shop", []); 

app.factory('DataService', function() { 
var cart = []; 
var set = function (data) { 
    cart = data; 
} 
var get = function() { 
    return cart; 
} 
}); 

app.controller("catalogController", function ($scope, $http) { 
$scope.bookStore = { 
    selected: {}, 
    books: null 
}; 
$scope.cart = []; 
$http.get("json/books.json") 
    .success(function (data) { 
     console.log(data); 
     $scope.bookStore.books = data; 
    }) 
    .error(function (err) { 

    }); 

$scope.addToCart = function (book) { 
    var found = false; 
    $scope.cart.forEach(function (item) { 
     if (item.id === book.id) { 
      item.quantity++; 
      found = true; 
     } 
    }); 
    if (!found) { 
     $scope.cart.push(angular.extend({ 
      quantity: 1 
     }, book)); 
    } 
}; 

$scope.removeFromCart = function (item) { 
    var index = $scope.cart.indexOf(item); 
    $scope.cart.splice(index, 1); 
}; 

$scope.getCartPrice = function() { 
    var total = 0; 
    $scope.cart.forEach(function (product) { 
     total += product.price * product.quantity; 
    }); 
    return total; 
}; 
}); 

app.controller("checkoutController", function ($scope, DataService) { 
$scope.cart = DataService; 
}); 
+0

可能な重複:http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js – Roy

答えて

1

変更の事のようなものにビット:その後、

app.factory('DataService', function() { 
    var cart = []; 

    return { 
     set: function (data) { 
      cart = data; 
     }, 
     get: function() { 
      return cart; 
     }, 
     add: function (item) { 
      cart.push(item); 
     } 
    } 
}); 

... 

app.controller("checkoutController", function ($scope, DataService) { 
    $scope.cart = DataService.get(); 
}); 

とは、工場内での機能に他のコントローラ内のカード上$http.get方法と、すべての操作を移動し、同じでそれらを宣言しますあなたはこのような何かをすべき上記Dataservice.get()

1

ような方法:

サービスは、角度のjsでシングルトンである、それは私ですこのクラスのインスタンスはアプリ内に1つしかありません。お使いのコントローラで次に

var app = angular.module("Shop", []); 

    app.factory('DataService', function ($http) { // usualy your service is the one which call your API (not your controller) 
    var cart = null; // the cart array is set in the instance of the class as private 

    return{ // here you declare all the functions you want to call from outside (your controllers) 
      set : function (data) { 
       cart = data; 
      }, 
       get: function(){ 
       return cart; 
      }, 
      getFromAPI = function() { // the code you have in your controller should goes here 
       return $http.get("json/books.json") 
         .success(function (data) { 
          console.log(data); 
         cart = data; //now you set you cart variable 
         }) 
         .error(function (err) { 

        }); 
      }, 
     }); 

app.controller("catalogController", function ($scope, DataService) { // include your service as a dependency 
$scope.bookStore = { 
    selected: {}, 
    books: null 
}; 
$scope.cartInCatalogController = DataService.get(); // it will set the value of cart that's in your service to your controller's scope 
if(!$scope.cartInCatalogController) {// if it's null so call the API 
     DataService.getFromAPI()// this function should return a promise 
     .success(function(data){// so call the success function 
      $scope.cartInCatalogController = data; 
     }) 
     .error(function(error){ 
      // do something here if you want 
     }); 
}); 

あなたが他のコントローラで同じことを行うことができます。 addToCard関数や他のものについて、私はあなた自身でそれを見つけることができます。

あなたはここから起動することができます:)