解析$ http从服务到ui-router到angularjs中的控制器?

时间:2015-10-29 13:35:44

标签: angularjs angular-ui-router angular-promise

我有一个服务,让我们说两个方法

var getAccountTypes = function () {
    return $http.get(serviceBase + "accountTypes");
};
var getSalesReps = function () {
    return salesRepResource.query();
};

如您所见,getAccountTypes使用$ http而getSalesReps使用$ resource。

我使用的是ui-router,这是我的状态:

.state("app.erp.accountVertical.createAccount", {
    url: "/createAccount",
    views: {
        "": {
            controller: "createAccountController as vm",
            templateUrl: "app/erp/accountVertical/account/createAccount.html"
        },
        "basic@app.erp.accountVertical.createAccount": {
            templateUrl: "app/erp/accountVertical/accountBasicInfoPanel.html"

        },
        "address@app.erp.accountVertical.createAccount": {
            templateUrl: "app/erp/accountVertical/account/accountBillToAddressPanel.html"
        }
    },
    resolve: {
        commonService: "commonService",
        dropDowns: function (commonService) {
            return {
                accountTypes: commonService.getAccountTypes(),
                countries: commonService.getCountries(),
                salesReps: commonService.getSalesReps(),
                states: commonService.getStates()
            };
        },
        loadMyFiles: function($ocLazyLoad) {
            return $ocLazyLoad.load({
                files: [
                    "app/erp/accountVertical/account/createAccountController.js"
                ]
            });
        }
    }
})

当我导航到视图时,我的Sales Reps下拉列表会正确填充。但是,我的帐户类型下拉列表是空的。似乎承诺没有得到解决?这是我在console.log中看到的内容。 enter image description here

这是控制器:

(function () {

    "use strict";

    angular
        .module("app.accountVertical")
        .controller("createAccountController", createAccountController);

    createAccountController.$inject = [
        "$http",
        "$state",
        "$filter",
        "appSettings",
        "dropDowns"
    ];

    function createAccountController($http, $state, $filter, appSettings, dropDowns) {
        var vm = this;

        vm.account = {};
        console.log(dropDowns.accountTypes);
        vm.accountTypeOptions = dropDowns.accountTypes.data;
        vm.salesRepOptions = dropDowns.salesReps;
    }
}());

如何从$ http中获取数据进入控制器?感谢。

1 个答案:

答案 0 :(得分:0)

这是因为您无法从.get请求返回该信息,因为它是异步调用。

这意味着使用null或空返回调用返回,并且.get方法仍在等待自己完成。当我在服务中使用.get时,我遇到了同样的问题。

我只需要在控制器中使用.get请求,然后使用.succes方法将repsonse数据分配给变量

 $http.get(serviceBase + "accountTypes"))
                .success(function(response){
                    $scope.accTypes = response.data
                })

repsonse.data是从.get方法返回你想要的信息的方式

编辑:

app.factory('myService', function($http) {
   return {
     getFooOldSchool: function(callback) {
       $http.get('foo.json').success(callback);
     }
   }
});