Question

我正在尝试与AngularJS应用中的RESTful API进行交互。当我这样做时，我的视图中没有数据显示。

我一定是误解了如何使用$ http + promises。任何想法有什么不对？

这是我的工厂：

angular.module('mycompany.resources').factory('Forms', ['$http', '$q', function($http, $q) {
    var Forms = {};

    Forms.all = function() {
        var deferred = $q.defer();
        $http.get('/api/forms.json').then(function(response) {
            console.log(response.data);
            return response.data;
        });
        return deferred.promise;
    };

    return Forms;
}]);

和我的控制员：

angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) {
    'use strict';

    $scope.forms = Forms.all();
}]);

和我的模板：

<div ng-controller="formListController">
    <ul class="form-list">
        <li ng-repeat="form in forms">
            <a class="form" href="#/forms/{{form._id}}">
                <span class="title">{{form.title}}</span>
                <span ng-if="form.lastPublished">Last published {{form.lastPublished | date:'M/d/yy'}}</span>
            </a>
        </li>
    </ul>
</div>

但是，如果我将数据硬编码到示波器上，我会看到数据：

angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) {
    'use strict';

    $scope.forms = [
        {
            "_id": "530f69046c5a65ed1b5a3809",
            "archived": false,
            "lastPublished": new Date("2014-02-20 14:21:09 UTC"),
            "title": "New Student Registration (2014 - 2015)"
        }
    ];
}]);

我从this example和this article了解到，我应该能够通过$scope.forms = Forms.all()在我的控制器中获取数据时依赖承诺。

Answer 1

我认为你应该简化你的源代码，类似于下面的

angular.module('mycompany.resources').factory('Forms', ['$http', '$q', function($http, $q) {
    var Forms = {};

    Forms.all = function() {

      return  $http.get('/api/forms.json')

    };

    return Forms;
}]);

angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) {
    'use strict';

     Forms.all().then(function(data){$scope.forms=data;});
}]);

Answer 2

在AngularJS 1.2中，他们删除了在视图模板中自动解包promises的功能。

您可以使用$ parseProvider.unwrapPromises（true）重新启用该功能，尽管最终会弃用此功能，因此最好更改模式。

Forms.all = function($scope, binding) {
        return $http.get('/api/forms.json').then(function(response) {
            console.log(response.data);

            $scope[binding] = response.data;

            return response.data;
        });
    };


Forms.all($scope, 'forms');

http://docs.angularjs.org/guide/migration#templates-no-longer-automatically-unwrap-promises

修改

再次查看您的工厂，您正在创建一个不必要的延迟对象，也永远不会解决。 $ http.get已经返回一个promise，所以你只需返回它。因此，根据您的AngularJS版本，您可能只需要返回$ http.get的结果，而不是重写函数以将实际数据绑定到您的范围。

无法通过$ http检索数据并使用AngularJS进行保证

2 个答案:

修改