javascript - 从工厂请求数据并将数据返回到同一工厂以在 Controller 之间共享

Question

问题:

如何在同一个工厂中存储和请求数据？

使用 AngularJS，我创建了一个名为 Products 的 factory

app.factory('Products', function($http, ENV){
    var Products = {};

    Products.details = 
    {
        //grabs the most current endpoint and creates a session of that data
        current: {},
        getProduct: function($scope, productId) {
            return $http.get(ENV.apiEndpoint + '/v2/listings/' + productId + '.json')
            .success(function(data){

              return data;
            })
            .error(function(data, status){
              console.log('error:' + status);
            });
        }

    }

    return Products;
});

此产品数据是从名为 MainCtrl 的父 Controller 中提取的:

 .controller('MainCtrl', function($scope, Products) {
   $scope.product = Product.details.current;
   var handleProductSuccess = function (data) {

     //stores the data for the current controller but also sends the data back to factory         
     $scope.product = data;
   };
   //on click of a product from view
   Products.details.getProduct($scope, $scope.productId).success(handleProductSuccess);
 }

从 api 成功请求数据后，我想将其保存回工厂的 Product.details.current 对象中。

这是返回 json 的一些示例:

{
"_id": "53e82f1d702724156ca806b0",
"index": 0,
"guid": "dd3b8081-867e-4908-90e7-70f5d6f32203",
"isActive": false,
"balance": "$2,233.42",
"picture": "http://placehold.it/32x32",
"age": 33,
"eyeColor": "green",
"name": "Deirdre Floyd",
"gender": "female",
"company": "KAGGLE",
"email": "deirdrefloyd@kaggle.com",
"phone": "+1 (842) 451-3828",
"address": "701 Lois Avenue, Rew, California, 4370"
}

最后这个Product.details.current本质上是一个“session(?)”数据集。这些数据可以在应用程序的许多范围、指令和状态之间传递。我认为这是一种非常简单的方法，通过创建一个空间来请求数据并存储要操作的数据 session 。不幸的是我的逻辑/语法不允许我正确地做到这一点。

您能帮助我了解正确的逻辑和语法吗？

Answer 1

您可以直接从 getProducts 函数更新 Products.details.current 。如果可以从应用中的不同位置调用 getProduct，并且您希望在 Controller 内保持信息同步，则可以使用 $watch。

app
    .factory('Products', function($http, ENV){
        var Products = {};

        Products.details =
        {
            //grabs the most current endpoint and creates a session of that data
            current: {},
            getProduct: function($scope, productId) {
                return $http.get(ENV.apiEndpoint + '/v2/listings/' + productId + '.json')
                    .success(function(data){
                        Products.details.current = data; // Update 
                        return data;
                    })
                    .error(function(data, status){
                        console.log('error:' + status);
                    });
            }

        };

        return Products;
    })

    .controller('MainCtrl', function($scope, Products) {
        $scope.product = Products.details.current;
        var handleProductSuccess = function (data) { // (not required if you use the watch below)

            // stores the data for the current controller

            $scope.product = data;
        };
        //on click of a product from view
        Products.details.getProduct($scope, $scope.productId)
            .success(handleProductSuccess);


        // If another scope can modify Products.details.current and you want to watch for it:
        $scope.$watch(
            function () { return Products.details.current;},
            function (newVal) { $scope.product = newVal; },
            true
        );
    });