角度版本和承诺的问题

时间:2016-07-15 14:10:07

标签: javascript angularjs

我没有意识到为什么这个代码在angularjs 1.2.0-rc.2下工作得很好,但没有用于更高版本(我试过1.2.0,1.4.9,1.5.7)

的index.html

<body ng-app="MyApp">
  <h1>Open Pull Requests for Angular JS</h1>
  <ul ng-controller="DashboardCtrl">
    <li ng-repeat="pullRequest in pullRequests">
      {{ pullRequest.title }}
    </li>
  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
  <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>-->
  <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>-->
  <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>-->
  <script src="scripts/app.js"></script>
</body>

脚本/ app.js

'use strict';

var app = angular.module('MyApp', []);

app.controller('DashboardCtrl', ['$scope', 'GithubService',function($scope, GithubService) {
    $scope.pullRequests = GithubService.getPullRequests();
}]);

app.factory('GithubFactory', ['$q', '$http',function($q, $http) {
    var myFactory = {};
    myFactory.getPullRequests = function() {
        var deferred = $q.defer();
    $http.get('https://api.github.com/repos/angular/angular.js/pulls')
            .success(function(data) {
            deferred.resolve(data); // Success
            })
            .error(function(reason) {
            deferred.reject(reason); // Error
            });

        return deferred.promise;
    }

    return myFactory;

}]);

调试我可以看到promise已解决,但数据未显示... 什么是使用承诺的正确方法?

1 个答案:

答案 0 :(得分:2)

它不起作用,因为1.2承诺不会在模板中自动“展开”。您需要明确设置已解析的数据:

这是不正确的:

$scope.pullRequests = GithubService.getPullRequests();

应该是:

GithubService.getPullRequests().then(function(data) {
    $scope.pullRequests = data;
});

还有一件事。您不应该使用deferred对象构建promise,因为$http服务已经为您返回一个:

app.factory('GithubFactory', ['$http', function($http) {
    var myFactory = {};
    myFactory.getPullRequests = function() {
        return $http.get('https://api.github.com/repos/angular/angular.js/pulls')
            .then(function(response) {
                return response.data;
            });
    };
    return myFactory;
}]);