Javascript 在控制器之间共享数据，AngularJS

在我的角度应用程序中，我面临以下情况，我想在此提供一些建议

我有一个显示一些产品的页面，这个页面由一个名为“ProductsController”的控制器管理。此控制器有一个名为“showProductDetails”的方法，该方法在用户单击特定产品时调用，该方法的目标只是检索产品的详细信息并在模式面板中显示这些详细信息。 在这里之前没有什么特别的。问题是，由于模块化，我希望将不同的控制器连接到模式面板，并在新控制器（本例为“ProductDetailController”）中管理此模式面板的所有逻辑。问题是，我在打开模式面板之前检索了产品的数据，但当我在第一个控制器的范围内检索此数据时，我无法从第二个控制器访问我以前检索的产品。我被告知在angularJs中在控制器之间共享数据是通过服务完成的，但我不知道无状态服务在这方面如何帮助我

以下是我的代码，以便更好地了解情况：

第一个控制器：

app.controller('ProductsController', ['$scope','productsFactory','commonFactory','productsFactoryHelper','$filter','$modal',function ($scope,productsFactory,commonFactory,productsFactoryHelper,$filter,$modal)
                               {




$scope.showProductDetails = function (size,product) {

$scope.showLoader('Loading the details of the product. Please wait...');

productsFactoryHelper.Product.query({id:product.id},function(response)
    {
    $scope.selectedProduct=response;
    $scope.hideLoader();
    var modalInstance = $modal.open({
          templateUrl: 'productDetail.html',
          controller: 'ProductDetailController',
          size: size

        });
    },function(error)
    {
    commonFactory.Pop('error','This product is not available at this moment.  Please try again later. If the problem persists contact a system administrator');
                    $scope.hideLoader();
    });


};

_init();    
                               }]);

以及第二控制器：

app.controller('ProductDetailController',['$scope','$modalInstance', function ($scope, $modalInstance) {

                                 $scope.ok = function () {
                                   $modalInstance.close();
                                 };

                                 $scope.cancel = function () {
                                   $modalInstance.dismiss('cancel');
                                 };
                               }]);

因此，基本上问题是如何从“ProductDetailController”访问“ProductsController”范围内的对象“selectedProduct”

---

谢谢您的帮助。

这确实可以通过服务来完成，因为它们是无状态的，并且在实例化后保留数据

function productService($http) {

    this.products = [];

    this.loadProducts() {
        $http.get('/url/to/your/product/api').then(function(err, data) {    
            this.products = data.products;
        });
    };

    this.getProducts = function() {
        return this.products;
    }
}

angular
    .module('yourModule')
    .service('productService', productService);

然后，只需在两个控制器中注入

productService

，使用

productService.loadProducts（）

加载产品，然后使用

productService.getProducts（）

获取产品

---

这只是一个例子。服务可用于共享任何类型的数据。

使用$modal解析将数据发送到新控制器，如下所示

app.controller('ProductsController', ['$scope','productsFactory','commonFactory','productsFactoryHelper','$filter','$modal',function ($scope,productsFactory,commonFactory,productsFactoryHelper,$filter,$modal)
                                      {




    $scope.showProductDetails = function (size,product) {

        $scope.showLoader('Loading the details of the product. Please wait...');

        productsFactoryHelper.Product.query({id:product.id},function(response)
                {
            $scope.selectedProduct=response;
            $scope.hideLoader();
            var modalInstance = $modal.open({
                templateUrl: 'productDetail.html',
                controller: 'ProductDetailController',
                size: size,
                resolve:{
                    "selectedProduct":response
                }

            });
                },function(error)
                {
                    commonFactory.Pop('error','This product is not available at this moment.  Please try again later. If the problem persists contact a system administrator');
                    $scope.hideLoader();
                });


    };

    _init();    
                                      }]);

我不知道producfactory helper产品查询是否有承诺，如果它有承诺，您可以这样使用

$scope.showProductDetails = function (size,product) {

    $scope.showLoader('Loading the details of the product. Please wait...');

    var modalInstance = $modal.open({
        templateUrl: 'productDetail.html',
        controller: 'ProductDetailController',
        size: size,
        resolve:{
            "selectedProduct":productsFactoryHelper.Product.query({id:product.id})
        }
    });
};

在ProductDetailController中，您可以按如下方式注入所选产品

app.controller('ProductDetailController',['$scope','$modalInstance','selectedProduct ' function ($scope, $modalInstance,selectedProduct ) {

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
}]);

---

服务确实是您的答案，如果您不需要多次访问数据，也可以使用纯事件

纯事件

app.controller('parentCtrl', function($scope) {
    // Do something

    // Action completed
    @scope.$emit('someactionComplete', data);
});

app.controller('childCtrl', function($scope) {
    $scope.$on('someactionComplete', function(data) {
        // Process data
    });
});

使用服务。使用服务的优点是数据是持久化的

app.controller('parentCtrl', function($scope, MyService) {
    // Do something

    // Action completed
    MyService.setData(data);
    @scope.$emit('someactionComplete');
});

app.controller('childCtrl', function($scope) {
    $scope.$on('someactionComplete', function() {
        MyService.getData(data);
    });
});

---

如果服务加载了数据并在getter中返回承诺，您可以进一步增强这一点。

是否可以将带有selectedProduct的controller设置为服务并将$watch附加到变量？并将服务注入两个控制器？可能是