AngularJs factory调用$http服务到controller拿不到数据

殷小强 2015-08-12 12:08:06

是关于一个angularjs的问题，版本1.4.3
在controller里调用$http调用api，可以顺利拿到api返回的数据，并绑定到html标签中，
但是想到很多个controller可能会用到此api，不利于维护，所以想在一个统一的地方去调用api，就在factory中调用，结果问题出来了，由于$http是异步加载的，还没等返回数据，controller就绑定一个空对象到前端，导致显示不出调用API返回的数据。网上也查了很多资料，一直没解决这个问题。不知道是版本的问题还是其他原因，用网上给的方式，会报错。

我把代码贴出来，各位大侠看看，怎么解决这个问题，拜托了，好郁闷的。。。。。。。
endpoint.js

angular.module("endpoint", []).service("endpointConfig", function () {

    var self = this;

    var siteUrl = "/";

    self.getUser = {

        url: siteUrl + "static/common/json/user.json",

        method: "GET"

    };

});

userModule.js

var userModule = angular.module("userModule", ["endpoint"]);

userModule.factory("userModel", function ($http, endpointConfig) {

    var userModel = {};

    userModel.query = function () {

        $http({

            url: endpointConfig.getUser.url,

            method: endpointConfig.getUser.method,

            data: {

            }

        }).success(function (data, header, config, status) {

            //响应成功

            debugger;

            return data;

        }).error(function (data, header, config, status) {

            //处理响应失败

            return data

        });

        //return {firstName:"static-johnny",lastName:"Yin",email:"adfsd@qq.com"};

    };

    return userModel;

});

userController.js

userModule.controller("userController", function ($scope, userModel) {

    debugger;

    $scope.model = userModel.query();

});

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

    <meta name="keywords" content="" />

    <meta name="description" content="" />

    <link href="static/common/plugins/bootstrap/bootstrap.min.css" rel="stylesheet" />

</head>

<body ng-app="userModule" ng-controller="userController">

    <div class="jumbotron">

        <input class="form-control" value="" ng-model="model.firstName" />

        <h1>First Name:<span ng-bind="model.firstName"></span></h1>

        <h1>Last Name:<span ng-bind="model.lastName"></span></h1>

        <h1>Email:<span ng-bind="model.email"></span></h1>

    </div>

    <script src="static/common/plugins/angular/angular.min.js"></script>

    <script src="static/common/js/app/services/endpoint.js"></script>

    <script src="static/common/js/app/modules/userModule.js"></script>

    <script src="static/common/js/app/controllers/userController.js"></script>

</body>

</html>

...全文

11404 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

软件攻城尸 2017-02-15

打赏
举报

angular.module("modelName",[]) .service("modelName", function($http, $q){ this.modelFunction = function(pm){ // defer()创建延迟对象 // notify()传递中间过程 // resolve()成功 // reject()失败 // when()传递已有数据不产生延迟 var defer = $q.defer(); $http({ method: 'GET', url: Url, params: pm }).success(function(data, status, headers, cfg) { defer.resolve(data); }).error(function(data, status, headers, cfg) { defer.reject(data); }); return defer.promise; }; }); ----------------------------------------------------------------- 调用： modelName.modelFunction ($scope.searchparam).then(function(res){ $scope.danju = res; });

uniume 2016-09-13

打赏
举报

你好，你这个解决方法方便向我讲解一下么，我试了没成功~

limjiregister 2016-04-20

打赏
举报

楼主的错误在于，在factory里根本没有返回异步获取的数据出去： var userModule = angular.module("userModule", ["endpoint"]); userModule.factory("userModel", function ($http, endpointConfig) { var userModel = {}; return { userModel.query = function () { return $http({ url: endpointConfig.getUser.url, method: endpointConfig.getUser.method, data: { } }).success(function (data, header, config, status) { //响应成功 debugger; return data; }).error(function (data, header, config, status) { //处理响应失败 return data }); //return {firstName:"static-johnny",lastName:"Yin",email:"adfsd@qq.com"}; }; } }); ======================= 我大概按照我的想法修改了一下，没验证，因为不是我的代码。大概意思就是层层返回return

limjiregister 2016-04-20

打赏
举报

引用 7 楼 baidu_34471116 的回复:

在controller里面获取factory里面异步请求的值时，在controller里面加上.then(function(res){})就可以获取到，res.data就是服务器返回的值
.controller('Ctrl', function($scope,Api) {
    Api.getDetail().then(function(res){
        $scope.data=res.data
    });
})

表示行不通：angular1.5.3.min.js:116TypeError: Cannot read property 'success' of undefined 换成你说的then也是如此

baidu_34471116 2016-03-29

打赏
举报

在controller里面获取factory里面异步请求的值时，在controller里面加上.then(function(res){})就可以获取到，res.data就是服务器返回的值


.controller('Ctrl', function($scope,Api) {
    Api.getDetail().then(function(res){
        $scope.data=res.data
    });
})

wefxwec4a 2016-01-26

打赏
举报

引用 5 楼 calcend 的回复:

请问怎么传参数的？@wefxwec4a 4楼

你想从哪儿往哪儿传？？？

calcend 2015-12-21

打赏
举报

请问怎么传参数的？@wefxwec4a 4楼

wefxwec4a 2015-09-09

打赏
举报

我已经解决了，用service中的接口统一promise来解决这个问题：首先是server


myapp.service('userInfo',['$http','$q',function($http,$q){
  var userInfo={};

  return {
    getUserInfo:function(){
      // 如果已存在则直接返回
      if(userInfo.name){
        return $q.when(userInfo);
      }
      //如果不存在数据则加载
      return $http.get('url').then(function(res){
        // 把数据存到server中并返回
        .userInfo=res.data;
        return res.data;
      })
    }
  }
}]);

然后在ctrl中接收


myapp.controller('xxxCtrl',['userInfo', '$scope',function(userInfo, $scope){
  userInfo.getUserInfo().then(function(res){
    $scope.userInfo=res;
  });
}]);

wefxwec4a 2015-09-09

打赏
举报

我也想问，这个问题题主解决了么？

Just_cl 2015-08-21

打赏
举报

你好，请问这个问题解决了吗

殷小强 2015-08-12

打赏
举报

如果把$http调用API的方法去掉，改成硬编码形式，就能正常显示数据。



var userModule = angular.module("userModule", ["endpoint"]);

userModule.factory("userModel", function ($http, endpointConfig) {

    var userModel = {};

    userModel.query = function () {

        //$http({

        //    url: endpointConfig.getUser.url,

        //    method: endpointConfig.getUser.method,

        //    data: {

        //    }

        //}).success(function (data, header, config, status) {

        //    //响应成功

        //    debugger;

        //    return data;

        //}).error(function (data, header, config, status) {

        //    //处理响应失败

        //    return data

        //});

        return {firstName:"static-johnny",lastName:"Yin",email:"adfsd@qq.com"};

    };

    return userModel;

});