Question

我在尝试在控制器中传递服务时遇到了一些问题。

我要做的是购物车，我有一个项目列表，当我点击按钮时，这些项目被添加到购物车，然后我想在单独的页面中列出购物车中的这些项目使用单独的控制器，所以我试图使用工厂的购物车，但我不知道你是否可以在控制器中设置工厂对象。

这是我的代码，希望你能指出我正确的方向。

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

Answer 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()

相同的方式声明它们

Answer 2

你应该这样做：

服务是角度js中的单身，这意味着您的应用中只有一个此类的实例。

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函数和其他东西，我让你自己找到它。

你可以从这里开始：）

Angular - 从一个控制器到另一个控制器的数组传递信息

2 个答案: