Question

我在Angular应用程序中面临以下情况，我想在此提出一些建议。

我有一个显示某些产品的页面，此页面由名为＆＃39; ProductsController＆＃39;的控制器管理。该控制器有一个名为＆＃39; showProductDetails＆＃39;这是在用户点击特定产品时调用的，此方法的目标只是检索产品的详细信息并在模式面板中显示这些详细信息。没有什么特别的，直到这里。问题在于，由于模块化，我想将一个不同的控制器连接到模态面板，并在新控制器中管理这个模态面板的所有逻辑，在这种情况下是＆＃39; ProductDetailController＆＃39;。问题是我在打开模态面板之前检索产品的数据，但是当我在第一个控制器的范围内检索这些数据时，从第二个控制器我无法访问我之前检索过的产品。我被告知在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');
                                 };
                               }]);

所以基本上问题是如何从＆＃39; ProductDetailController＆＃39;对象＆＃39; selectedProduct＆＃39;这属于＆＃39; ProductsController＆＃39;。

的范围

感谢您的帮助。

Answer 1

使用$ 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帮助产品查询是否有承诺，如果它有一个你可以这样使用的承诺..

$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()获取产品。

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

Answer 3

服务确实是您的答案，或者您可以使用纯事件，如果您不需要再访问一次数据。

Pure Eventing

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，你可以进一步增强这一点。

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

3 个答案: