javascript - AngularJS 将数据从服务返回到 View

Question

我很难将数据从我的服务返回到我在 AngularJS 中的 View 。这是我现在所拥有的。我也尝试过类似的事情，但得到了相同的结果。 AngularJS Load Data from Service

Controller

.controller('ClassCtrl', ['$scope', '$stateParams', 'ClassService', function($scope, $stateParams, ClassService) {
        $scope.data = ClassService.getClass($stateParams.siteID, $stateParams.classDate, $stateParams.classID);
        $scope.$apply(); // I thought this my do it?
    }])

服务

.factory('ClassService', ['$http', function ($http) {
        return {
            getClass: function(parm1, parm2, parm3) {
                var classData = {};

                var url = 'http://somesoapservice.com';
                var sr = '<?xml version="1.0" encoding="UTF-8"?>' +
                    '<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">' +
                    'moresoapstuff' +
                    '</soap:Body>' +
                    '</soap:Envelope>';

                $http({
                    method: 'POST',
                    url: url,
                    data: sr,
                    headers: {
                        'Content-type': 'text/xml',
                        'SOAPAction': 'http://somesoapservice/soapaction'
                    }
                }).
                success(function (data, status, headers, config) {
                    var classDetail = $(data).find('Class');
                    var staffFirst = classDetail.find('Staff').find('FirstName').text();

                    //alert(staffFirst); // This displays the first name. Great!

                    classData = {
                        staffFirst: staffFirst
                    };

                    return classData;
                }).
                error(function(data, status, headers, config) {
                    alert('Error!');
                });

                return classData;
            }
        }
    }])

查看

<view title="navTitle" right-buttons="rightButtons">
    <content has-header="true" has-footer="true">
    First Name: {{data.staffFirst}}
    </content>
</view>

当放入服务中时，我可以在警报中看到 StaffFirst，但无法让它出现在我的 View 中。

Answer 1

我刚刚开始学习 AngularJS，这是我在基于桌面同步的开发背景中错过的陷阱之一。

这里的问题是您的服务中的 $Http 调用是异步触发的。因此，getClass 末尾的代码行 return classData; 将在 $Http 调用之前返回。因此，只会返回对象的空初始化值 ({})，这就是您的 View 必须访问的全部内容。

您需要的是 Hook Angular 框架的 promise 功能。 Promise 本质上允许您在其自身上放置一个方法回调，以便当异步操作完成时，您的代码逻辑可以确保以同步方式触发。

您的代码需要更改如下:

我们首先需要将 Promise 库注入(inject)到你的工厂中

.factory('ClassService', ['$http','$q' function ($http, $q) {

您的工厂返回将是:

getClass: function(parm1, parm2, parm3) {
  var classData = {};

  var url = 'http://somesoapservice.com';
  var sr = '<?xml version="1.0" encoding="UTF-8"?>' +
           '<soap:Envelope 
            xmlns:soap="http://schemas.xmlsoap.org/soap
            /envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">' +
           'moresoapstuff' +
           '</soap:Body>' +
           '</soap:Envelope>';

           var deferred = $q.defer(); // our promise object

           $http({
                method: 'POST',
                url: url,
                data: sr,
                headers: {
                    'Content-type': 'text/xml',
                    'SOAPAction': 'http://somesoapservice/soapaction'
                }
            }).
            success(function (data, status, headers, config) {
                var classDetail = $(data).find('Class');
                var staffFirst = classDetail.find('Staff')
                                 .find('FirstName').text();

                //alert(staffFirst); // This displays the first name. Great!

                classData = {
                    staffFirst: staffFirst
                };
                deferred.resolve(classData); //At this point our promise is "resolved"
                return deferred.promise;
            }).
            error(function(data, status, headers, config) {
                deferred.reject("Error!");
                return deferred.promise;
            });
            }

你的 Controller

.controller('ClassCtrl', ['$scope', '$stateParams', 'ClassService', function($scope, $stateParams, ClassService) {           
   ClassService.getClass($stateParams.siteID, $stateParams.classDate,    $stateParams.classID)
  .then(function(data){ 
    $scope.data = data; //This callback will only execute once the $http success has   completed.
  })
  .fail(function(error){
    alert(error);
  });

  }])