如何在我的示例中获取 http 请求数据？

Question

我正在尝试在我的第一个控制器中获取 http 请求结果。 http 请求由另一个控制器触发。我遇到的问题是我不确定如何检测请求是否在我的第一个控制器中完成。我有类似的东西

第一个控制器：

//I am not sure how to get the customer result if
//http requests are trigger by another controllers here.

customerFactory.getCustomerResult????

第二控制器：

//trigger the http request..
var id = 1;
$scope.clickme = function() {
    var obj = customerFactory.callApi(id)
}

我的工厂

customerFactory.callApi = function(id) {
    return getCustomer(id)
        .then(function(customer) {
            return customer;    

         })  
}

var getCustomer = function(id) {
    return $http.get('/api/project1/getCustomer' + id);
}

return customerFactory;

html

<div ng-controller="firstCtrl">
    //codes...
</div>

//other codes..
//other codes..

<div ng-controller="secondCtrl">
    //codes...
</div>

第一个和第二个控制器不相关。他们彼此相距很远。如何让 firstCtrl 检测到 http 请求是否完成并获取客户数据？非常感谢！

Answer 1

您可以使用作为单例的工厂或服务来负责发出请求和存储数据。服务和工厂都是单例，因此单个实​​例持续存在以执行应用程序，并且可以通过注入工厂或服务从控制器中引用数据和函数（这两种方法都是在之前配置时使用更简洁的语法定义提供者的方法不需要通过提供商使用服务/工厂）。

angular.module("exampleApp", []).service('ExampleService', ["$http", "$q" ,function ($http, $q) {
    var service = {
        returnedData: [],
        dataLoaded:{},
        getData = function(forceRefresh)
        {
            var deferred = $q.defer();

            if(!service.dataLoaded.genericData || forceRefresh)
            {
                $http.get("php/getSomeData.php").success(function(data){
                    angular.copy(data, service.returnedData)
                    service.dataLoaded.genericData = true;
                    deferred.resolve(service.returnedData);
                });
            }
            else
            {
                deferred.resolve(service.returnedData);
            }

            return deferred.promise;
        },
        addSomeData:function(someDataToAdd)
        {
            $http.post("php/addSomeData.php", someDataToAdd).success(function(data){
                service.getData(true);
            });
        }
    };
    return service;
}]).controller("ExampleCtrl", ["$scope", "ExampleService", function($scope, ExampleService){
  $scope.ExampleService = ExampleService;
}]).controller("ExampleCtrl2", ["$scope", "ExampleService", function($scope, ExampleService){
  ExampleService.getData();
  $scope.ExampleService = ExampleService;
}]);