Question

我有一个将在控制器之间使用的基本数据服务。但是我遇到了一些问题，抓住了一些通过$http添加的数据。

服务：

angular.module('core').service('FormService', ['$http', function($http) {
    var _this = this;
    _this.dropdownData = {
        contactTimes: ['Anytime','Morning','Afternoon','Evening'],
        industries: {},
    };

    $http.get('/json').success(function(resp){
        _this.dropdownData.industries = resp.industries; 
    });
}]);

控制器：

angular.module('core').controller('SignupController', ['$scope', '$http', '$state', 'FormService', function($scope, $http, $state, FormService) {

    console.log(FormService.dropdownData); // Shows full object incl industries
    console.log(FormService.dropdownData.industries); // empty object {}

}]);

如何在控制器中获取FormService.dropdownData.industries？

Answer 1

创建如下的服务

appService.factory('Service', function ($http) {
        return {
            getIndustries: function () {
                return $http.get('/json').then(function (response) {
                    return response.data;
                });
            }
        }
    });

在控制器中调用

appCtrl.controller('personalMsgCtrl', ['$scope', 'Service', function ($scope, Service) {
    $scope.Industries = Service.getIndustries();
}]);

希望这会有所帮助

Answer 2

鉴于您的控制台日志显示正确的对象，这表明您的服务正常运行。你在这里只犯了一个小错误。您需要访问退货承诺中的data属性。

angular.module('core').service('FormService', ['$http', function($http) {
  var _this = this;
  _this.dropdownData = {
     contactTimes: ['Anytime','Morning','Afternoon','Evening'],
     industries: {},
 };

 $http.get('/json').success(function(resp){
    //note that this is resp.data.industries, NOT resp.industries
    _this.dropdownData.industries = resp.data.industries; 
   });
 }]);

Answer 3

在您的服务中添加一个方法，并使用内部的$ Http.get，如下所示

_this.getindustries = function (callback) {
        return $http.get('/json').success(function(resp){
            _this.dropdownData.industries = resp.industries; 
            callback(_this.dropdownData)
      });
    };

在你的控制器中需要像下面那样访问它。

 angular.module('core').controller('myController', ['$scope', 'FormService', function ($scope, FormService) {
   FormService.getDropdownData(function (dropdownData) {
       console.log(dropdownData); // Shows full object incl industries
       console.log(dropdownData.industries); // object {}
   });

}]）;

Answer 4

假设您确实存在数据并且服务器没有问题，那么有很多可能的解决方案

回复承诺

angular.module('core').service('FormService', ['$http', function($http) {
  var _this = this;
  _this.dropdownData = {
    contactTimes: ['Anytime','Morning','Afternoon','Evening'],
    industries: {},
  };

  _this.dropdownData.industries = $http.get('/json');
}]);

//Controller
FormService.industries
.then(function(res){
    $scope.industries = res.industries
});

使用routeProvider / ui-route

解析

请参阅：$http request before AngularJS app initialises?

您还可以编写一个函数来在应用程序开始运行时初始化服务。在一天结束时，它是关于使用promise来等待数据加载。如果您之前从未听说过承诺，请先告知自己。

Answer 5

行业对象将在$ http调用返回的稍后时间点填充。在此期间，您仍然可以绑定到视图中的引用，因为您已使用angular.copy保留了引用。当$ http调用返回时，视图将自动更新。

当$ http调用返回时，允许服务的用户处理事件也是一个好主意。您可以通过将$ promise对象保存为行业的属性来实现此目的：

angular.module('core').service('FormService', ['$http', function($http) {
    var _this = this;
    _this.dropdownData = {
        contactTimes: ['Anytime','Morning','Afternoon','Evening'],
        industries: {},
    };

    _this.dropdownData.industries.$promise = $http.get('/json').then(function(resp){
               // when the ansyc call returns, populate the object, 
               // but preserve the reference
               angular.copy( resp.data.industries, _this.dropdownData.industries); 
               return _this.dropdownData.industries;
           });


}]);

控制器

    app.controller('ctrl', function($scope, FormService){
              // you can bind this to the view, even though the $http call has not returned yet
              // the view will update automatically since the reference was preserved
              $scope.dropdownData = FormService.dropdownData;

              // alternatively, you can hook into the $http call back through the $promise
              FormService.dropdownData.industries.$promise.success(function(industries) {
                     console.log(industries);
              });
    });

在服务中使用$ http的问题

5 个答案:

回复承诺

使用routeProvider / ui-route