在控制器之間共享數據，AngularJS

Question

我的Angular應用程序中遇到以下情況，我想在這里提出一些建議。

我有一個頁面，其中顯示了一些產品，該頁面由名為“ 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”。

謝謝您的幫助。

Answer 1

使用$ modal的resolve將數據發送到新的控制器，如下所示。

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

我不知道生產幫助器產品查詢是否有承諾，如果有可以像這樣使用的承諾。

$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中，您可以像下面這樣注入這個selectedProduct。

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

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

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

Answer 2

實際上，這可以通過服務來完成，因為它們是無狀態的，並且一旦實例化就保留其數據。

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()獲取productService.getProducts() 。

這只是一個例子。 服務可用於共享任何類型的數據。

Answer 3

服務確實是您的答案，或者，如果您不需要訪問數據一次以上，則可以使用純事件。

純事件

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中返回了promise。