无法从$ q获取数据到范围

时间:2014-02-16 15:32:17

标签: javascript angularjs angularjs-scope angularjs-service

我正在尝试使用带有$ q的promises将从API返回的一些数据绑定到我的作用域,我能够从服务器中提取数据而没有任何问题(我可以看到使用fiddler返回JSON)但是$ scope变量保持为空,任何帮助将不胜感激!提前谢谢。

代码:

toDoListService.js

 app.factory("toDoListService", function ($http, $q) {
        var deferred = $q.defer();

        return {
            get: function () {

                $http({ method: 'GET', url: '/api/todo/' }).
                    success(function (data) {
                        deferred.resolve(data);
                    }).
                    error(function (data, status, headers, config) {
                        deferred.reject(status);
                    });
                return deferred.promise;
            }
});

toDoListController.js

app.controller("toDoListController", function($scope, toDoListService){
      $scope.toDoList = toDoListService.get();
});

3 个答案:

答案 0 :(得分:3)

首先,您应该将var deferred = $q.defer();放在get函数中,以便每个get都拥有自己的延迟对象。

第二个get实际返回的是一个承诺。因此,您需要以这种方式访问​​数据:

app.controller("toDoListController", function($scope, toDoListService){
    toDoListService.get().then(function(data){
           $scope.toDoList = data;
    });
});

答案 1 :(得分:3)

现在,您的$scope.toDoList必然会受到承诺。这种绑定方式曾经起作用,但我认为,1.2。

迈克尔建议,你必须这样做:

app.controller("toDoListController", function($scope, toDoListService){
  toDoListService.get().then(function(data){
    $scope.toDoList = data;
  });
});

此外,根本不需要使用$q,因为$http无论如何都会返回一个承诺。因此,您可以这样做:

app.factory("toDoListService", function ($http){       
   return {
     get: function () {
        return $http({ method: 'GET', url: '/api/todo/' });
     }
   };
});

答案 2 :(得分:2)

您可以使用以下方法简化代码:

<强> toDoListService.js

app.factory("toDoListService", function ($http, $q) {
    return {
        get: function () {
            return $http({ method: 'GET', url: '/api/todo/' });
        }
    }
});

<强> toDoListController.js

app.controller("toDoListController", function($scope, toDoListService) {
    toDoListService.get().then(function(response){
        $scope.toDoList = response.data;
        return response;
    });
});

请务必在成功回调中返回response,否则链接的承诺将无法收到。