AngularJS:服务对象为空

AngularJS : Service object empty

本文关键字：对象 服务 AngularJS      更新时间：2023-09-26

我是Angular的新手，我已经挣扎了一段时间，试图在我的一个控制器中调用使用Restangular的工厂。这里是控制器:

'use strict';
angular.module('myApp')
  .controller('UserCtrl', ['WebApi', function($scope, WebApi) {
    $scope.user = WebApi.getProfile(1);
  }
]);

当我调用控制器中的WebApi工厂时，WebApi对象是空的。当我调用该方法时，它将返回undefined。当我在控制台中记录对象时，我得到

Object {}

这是我的工厂:

"use strict";
angular.module("myApp.services", ["restangular"])
  .factory("WebApi", ["Restangular", function(Restangular) {
    var getProfile;
    Restangular.withConfig(function(RestangularConfigurer) {
      RestangularConfigurer.setBaseUrl("http://127.0.0.1:3000/api/v1");
    });
    getProfile = function(id) {
      Restangular.one("users", id).get().then(function(data) {
        return data;
      });
    };
  }
]);

应用程序模块:

'use strict';
angular.module('myApp', ['ngCookies', 'ngSanitize', 'ui.router', 'myApp.services']);

它包含在我的索引html:

    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/services/webapi.js"></script>
    <script src="scripts/controllers/user.js"></script>

我做错了什么?

这是一个异步调用:

Restangular.one("users", id).get().then(function(data) {
    return data;
  });

并且它不返回任何东西给父函数

你可以从父函数返回一个promise，并在上面提到的then回调(而不是return data;)中解析它。

另一件事是，工厂需要返回一个对象，以便其属性可用。这里有一些很好的答案:棱角分明。Service vs . angular.factory

更新

根据评论中的问题，下面是我所说的必须返回一个对象的意思:

angular.module("myApp.services", ["restangular"])
  .factory("WebApi", ["Restangular", function(Restangular) {
    var getProfile;
    getProfile = function(id) {
        // this function is not visible from outside
    };
    // but if you do this:
    return {
        someValue: 3, // accessible via WebApi.someValue
        someFunction: function(){alert('me too')},
        getProfile: getProfile  // now it works as WebApi.getProfile(),
        etc: etc
    }
    // all of these above are now accessible
  }
]);

请看下面的简单示例:http://plnkr.co/edit/KGUqCVJqeEcD5d6m7sVw?p=preview

你应该修改你的代码来使用promise并从那里返回promise，参见dummy code 

     angular.module("myApp.services", ["restangular"])
              .factory("WebApi", ["Restangular","$q", function(Restangular,$q) {
                Restangular.withConfig(function(RestangularConfigurer) {
                  RestangularConfigurer.setBaseUrl("http://127.0.0.1:3000/api/v1");
                });
                return {
                getProfile : function(id) {
                var deferred = $q.defer();
                  Restangular.one("users", id).get().then(function(data) {
                    deferred.resolve(data);
                  });
                  return deferred.promise;
                };
}
              }
            ]);
        'use strict';
        angular.module('myApp')
          .controller('UserCtrl', ['WebApi', function($scope, WebApi) {
             WebApi.getProfile(1).then(function(data){$scope.user=data});
          }
        ]);
相关文章：