Question

我很难将数据从我的服务返回到AngularJS中的视图。这就是我现在所拥有的。我也尝试过类似的东西，但结果相同。 AngularJS Load Data from Service

控制器

.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，但是无法让它出现在我的视图中。 enter image description here

Answer 1

我刚刚开始学习AngularJS，这是我从基于桌面同步的开发背景中错过的那些问题之一。

这里的问题是你的服务中的$ Http调用是异步启动的。因此，return classData;末尾的代码行getClass将在$ Http调用之前返回。因此，只返回对象的空初始值（{}），并且您的所有视图都必须访问。

您需要的是加入Angular框架的承诺功能。 promise实质上允许您对自身进行方法回调，以便在异步操作完成时，确保您的代码逻辑以同步方式触发。

您的代码需要更改如下：

我们首先需要将promise库注入您的工厂

.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('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);
  });

  }])

AngularJS将数据从服务返回到视图

1 个答案: