AngularJS 等待简单的承诺被解决

Question

我是 AngularJS 和 WebApi 的新手，我不知道如何等待承诺得到解决。

我有一个非常简单的应用程序。

这是我的 HTML 代码：

<body ng-app="PersonApp">
<div ng-controller="PersonController">
    <div id="personTable">
        <table>
            <tr ng-repeat="p in person">
                <td>{{ p.surname }}</td>
                <td>{{ p.name }}</td>
                <td>{{ p.birthDate | date:'yyyy-MM-dd' }}</td>
                <td>{{ p.fiscalCode }}</td>
                <td>
                    <button type="submit" data-ng-click="edit(p)" class="btn btn-default">Edit</button>
                    <button type="submit" data-ng-click="delete(p)" class="btn btn-default">Delete</button>
                </td>
            </tr>
        </table>
    </div>//.................

我的控制器：

app.controller('PersonController', ['$scope', 'PersonApp', function ($scope, PersonApp) {
    PersonApp.getPersons($scope);

最后是服务：

app.service('PersonApp', ['$http', function ($http) {
    this.getPersons = function ($scope) {
        return $http({
            method: "GET",
            url: "../api/person",
            headers: { 'Content-Type': 'application/json' }
        }).success(function (data) {
            $scope.person = data;
            console.log(data);
        }).error(function (data) {
            console.log(data);
        });;
    };

我试过到处插入承诺，但我真的想不通。

我知道这是一个非常愚蠢的问题，但我希望你有耐心给我一个简单的答案。

非常感谢！

Answer 1

您不应该将 $scope 注入到您的服务中。 $http 服务将 return 一个承诺。如果您将 PersonApp 服务修改为简单地 return $http 承诺，您可以在控制器中分配 $scope.person 属性。下面的代码未经测试，但你会明白基本的想法。

PersonApp 服务

app.service('PersonApp', ['$http', function ($http) {
    this.getPersons = function () {
        return $http({
            method: "GET",
            url: "../api/person",
            headers: { 'Content-Type': 'application/json' }
        });
    };
}]);

个人控制器

app.controller('PersonController', function($scope, PersonApp) {
  PersonApp.getPersons().then(function(data) {
      $scope.person = data;
      console.log(data);
  });
});

这是一个 link 给一个工作中的 plunker 的代码（我伪造了 $http 部分，因为我无法访问你的服务）。

http://plnkr.co/edit/tpl:rfqcl9AHEoJZEEJxyNn2?p=preview

这是一篇关于 $http 承诺的文章。

http://www.peterbe.com/plog/promises-with-$http

AngularJS 等待简单的承诺被解决

AngularJS wait for simple promise to be resolved

javascript

angularjs

angular-promise