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

时间:2014-11-02 02:27:25

标签: javascript angularjs

我正在尝试在第一个控制器中获取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请求已完成并获取客户数据?非常感谢!

1 个答案:

答案 0 :(得分: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;
}]);