AngularJS:使工厂内通过 $http 接收的数据可以在 Controller 内访问

Question

我有一个名为“服务器”的工厂，其中包含与服务器交互的方法(获取/放置/发布/删除..)。当我的 Controller 中包含所有代码时，我成功登录并成功获取所有数据。现在我想分离这段代码并对其进行一些重组，但我遇到了问题。我仍然可以登录并且还可以获取数据 - 但数据只是打印出来；我不确定如何访问 Controller 中的数据？我在网络上看到一些“.then”而不是“.success”，但我不知道到底是怎么回事。

这是我的工厂:(包含在 services.js 中)

app.factory('Server', ['$http', function($http) {
    return {
        // this works as it should, login works correctly
       login: function(email,pass) {
            return $http.get('mywebapiurl/server.php?email='+email+'&password='+pass').success(function(data) {
                console.log("\nLOGIN RESPONSE: "+JSON.stringify(data));
                if(data.Status !== "OK")
                   // login fail
                   console.log("Login FAIL...");
                else
                   // success   
                   console.log("Login OK...");
                });
        },

        // intentional blank data parameter below (server configured this way for testing purposes)
        getAllData: function() {
            return $http.get('mywebapiurl/server.php?data=').success(function(data) {
                console.log("\nDATA FROM SERVER: \n"+data); // here correct data in JSON string format are printed
            });
        },
    };

}]);

这是我的 Controller :

app.controller("MainController", ['$scope', 'Server', function($scope, Server){ 

   Server.login();   // this logins correctly   

   $scope.data = Server.getAllData(); // here I want to get data returned by the server, now I get http object with all the methods etc etc.

  …. continues … 

如何获取在工厂内使用 $http 检索的数据以便在 Controller 中访问？我只有一个 Controller 。

感谢您的帮助，我确信一定有一种简单的方法可以做到这一点。或者我可能采取了错误的方法来解决这个问题？

编辑: 例如，我还需要能够使用 ng-click 从 View 调用工厂函数。现在我可以这样做:

// this is a method in controller
$scope.updateContacts = function(){
    $http.get('mywebapiURL/server.php?mycontacts=').success(function(data) {
        $scope.contacts = data;
    }); 
};

并使用 ng-click="updateContacts()"在 View 中进行调用。看看 $scope.contacts 如何在上述函数中获取新数据。我应该如何使用 .then 方法执行此操作？(将返回的数据分配给变量)

我直接提出的问题:

假设我需要将部分 Controller 代码与其分开(这样它就不会变得困惑)，例如在所有 $scope 中可用的一些函数。在 AngularJS 中实现这一点的最佳方法是什么？也许这不是我想象的服务……

Answer 1

诀窍是在服务中使用 promise 来代理结果。

$http 服务返回一个 promise ，您可以使用 then 和列表或成功和错误来分别处理这些条件。

此代码块显示处理调用结果:

var deferred = $q.defer();
$http.get(productsEndpoint).success(function(result) {
    deferred.resolve(result);
}).error(function(result) { deferred.reject(result); });
return deferred.promise;

该代码使用 Angular $q 服务来创建 promise 。当 $http 调用被解析后，promise 将被用来将信息返回给你的 Controller 。 Controller 是这样处理的:

app.controller("myController", ["$scope", "myService", function($scope, myService) {
    $scope.data = { status: "Not Loaded." };
    myService.getData().then(function(data) { $scope.data = data; });
}]);

(如果您想显式处理拒绝，可以将另一个函数传递给 then)。

这就结束了循环:一个使用 Promise 返回数据的服务，以及一个调用该服务并链接结果的 Promise 的 Controller 。我在这里有一个完整的 fiddle :http://jsfiddle.net/HhFwL/

您可以更改端点，现在它仅指向通用 OData 端点来获取一些产品数据。

有关 $http 的更多信息:http://docs.angularjs.org/api/ng.%24http有关 $q 的更多信息:http://docs.angularjs.org/api/ng.%24q