不了解angularjs中的诺言

Question

我以为我在AngularJS＆REST上做得很好，直到遇到一个问题，即我的数据服务没有及时返回数据供模型使用它。

因此，我已经研究并实现了一个Promise，但是它仍然没有延迟，直到完成HTTP REST调用为止。

我将不胜感激。

我的路由将预订ID传递给bookingController，后者检索预订详细信息，然后在booking.html模板中以可编辑的形式显示它们。

testLabApp.controller('bookingController', function ($q, $scope, $location, $window, $routeParams, service) {
if ($routeParams.id) {
    $scope.bId = $routeParams.id;

    //Expected this to setup my promise
    var bookdefer = $q.defer();
    bookdefer.promise
        .then(function (booking) {

            //When successful the result is assigned to my booking in the controller $scope
            $scope.booking = booking;

            //I am making a copy for form updates
            $scope.editableBooking = angular.copy($scope.booking);

            //When it runs console displays error:-
            // "TypeError: Unable to get property 'Storeno' of undefined or null reference"
            console.log("[bookingCtrl] 1 New: " + $scope.booking.Storeno + " and Editable: " + $scope.editableBooking.Storeno);
        });

    // Is this not calling my getBooking service function with the Id passed into my controller?
    bookdefer.resolve(service.getBooking($scope.bookingId));

}
else {
    //...
}

当代码到达“ [bookingCtrl] 1 ...”时，控制台显示错误“ TypeError：无法获取未定义或空引用的属性'Storeno'”，这使我认为尚未检索到预订数据。

然后在此消息之后，控制台显示：

[getBooking] Done = Id: 209 | Store no: 9180 | Description: test | Status: Booked

我的数据服务包括许多可进行REST调用的功能：

testLabApp.factory('service', ['$rootScope', '$http', function ($rootScope, $http) {
    var service = {};

    $http({
        method: 'GET',
        url: "/_api/web/lists/GetByTitle('Bookings')/Items?$filter=Id eq '" + bookingId + "'",
        headers: {
            'Accept': 'application/json; odata=verbose'
        },
    }).success(function (d) {
        var e = d.d.results[0];
        booking = {
            Id: e['Id'],
            Storeno: e['Title'],
            BookedBy: e['BookedBy'],
            Description: e['Description'],
            StartDate: e['StartDate'],
            EndDate: e['EndDate'],
            Status: e['Status']
        };
        console.log("[getBooking] Done = Id: " + booking.Id + " | Store no: " + booking.Storeno + " | Description: " + booking.Description + " | Status: " + booking.Status);

        return booking;

    }).error(function (er) {
        console.log("[getBooking] http error : " + er);
    });
};

再次感谢您的帮助或建议。

问候克雷格

Answer 1

服务中的成功功能是异步执行的。 结果，您的服务实际上将null返回给控制器。 这是我在所有角度项目中所做的工作：

service.getStuff = function(id) {
    var dfd = $q.defer();

    $http({
        method: 'GET',
        url: '/api/some-end-point/id'
    }).then(function(data) {
        var result = data.data;
        dfd.resolve(result);
    }, function(error) {
        $log.error(error);
        dfd.reject(error);
    });
    return dfd.promise;
}

我的控制器是这样写的：

if ($routeParams.id) {
    $scope.bId = $routeParams.id;

    //Expected this to setup my promise
    service.getStuff($routeParams.id).then(
        function(data){
            $scope.booking = data;
        },
        function(error){
            console.log(error);
        }
    );
}

Answer 2

“下面是使用服务从控制器进行异步get调用的示例。 实际上，您可以将$ http.get（）返回到控制器，以便不需要创建新的延迟对象：

(function(){

  angular.module('app', []);


  angular.module('app').factory('service', ['$http', function($http){

    return {
      getData: getData;
    }

    function getData(){
      return $http.get('/url')
        .success(function(data){
          //Do business logic here
          return data;
        })
        .error(function(error){
          return error;
        });
    }

  }]);

  angular.module('app').controller('controller', ['$scope', 'service',  function($scope, service){

    service.getData()
      .success(function(data){
        $scope.data = data;
      })
      .error(function(error){
        //error logic
      });
  }]);

})();