为什么 $http.get() 在我的 Angular 服务中未定义？答案

【问题标题】：Why is $http.get() undefined in my Angular service?为什么 $http.get() 在我的 Angular 服务中未定义？
【发布时间】：2014-03-13 19:15:29
【问题描述】：

我正在尝试加载一些 JSON 并使用 $rootScope 存储它，以便它在控制器之间持续存在。当我运行我的应用程序时，我收到以下错误：

TypeError: Cannot call method 'get' of undefined

在我尝试引入 $rootScope 之前，get 方法运行良好...有什么想法吗？

我的服务如下所示：

  1 /**
  2  * Service to get the quiz data from a JSON source
  3  */
  4 app.factory('quizService', ['$rootScope', function ($scope, $rootScope, $http) {
  5     var promise;
  6     var service = {
  7         getQuiz: function($scope, $http) {
  8             if ( !promise ) {
  9                 promise = $http.get('QuizFileName.quiz').then(function (response) {
 10                     return response.data;
 11                 });
 12             }
 13             return promise;
 14         }
 15     };
 16     return service;
 17 }]);

我的控制器如下所示：

  7     // Get Quiz data from service
  8     quizService.getQuiz().then(function(data) {
  9         $scope.quiz = data;
 10
 11         // Redirect to scores if already completed this
 12         if($scope.quiz.complete === true) {
 13             $location.path('scores');
 14         }
 15     });

【问题讨论】：

标签： json angularjs service rootscope

【解决方案1】：

您在定义工厂时使用了“数组模式”。您在函数中使用的每个服务都应该有一个字符串，但您只有一个。

也就是说，你所做的是

app.factory('quizService', ['$rootScope', function ($scope, $rootScope, $http) {
    //insert code
}]);

但你应该做的是

app.factory('quizService', ['$scope', '$rootScope', '$http', function ($scope, $rootScope, $http) {
    //insert code
}]);

AngularJS 会将用字符串命名的函数映射到参数。试试看它是否能解决你的问题。

编辑：啊，Reboog711 的回答在解决问题时更有意义，我不知何故错过了代码的后半部分。但是我留下了这个答案，因为您还应该修复工厂定义。

【讨论】：

+！用于解决带有数组表示法问题的问题。
谢谢。除了数组模式之外，定义工厂有什么替代方法吗？
我个人在每次编写 Angular 代码时都会使用这种模式，因为它的设计目的是为了在缩小后仍然存在。我个人建议您继续使用它。正在发生的事情是，在缩小之后，您最终可能会得到app.factory('quizService', ['$http', function (a) { .. }]);，因为缩小会将变量减少到尽可能少的字符。字符串没有改变，所以角度检查第一个字符串并知道变量a实际上是$http。

【解决方案2】：

getQuiz 是工厂内部的一个函数：

getQuiz: function($scope, $http) {

当您调用 getQuiz 时，您不会向其中传递任何参数：

quizService.getQuiz()

$http 是未定义的，因为您调用它时没有传递任何参数。 Angular 不会将项目注入到您手动调用的函数中。它只会对 AngularJS 自己调用的函数执行此操作——例如控制器或工厂函数。

所以，您有几个选择。一种是将 $scope 和 $http 参数传递给函数，如下所示：

quizService.getQuiz($scope, $http)

我确信这会解决问题，但肯定会是一种奇怪的方法。

我可能会从函数定义中删除 $scope 和 $http 函数：

 getQuiz: function() {

然后确保你修改了你的工厂定义：

app.factory('quizService', ['$scope','$rootScope','$http', function ($scope, $rootScope, $http) {

如果不进行此修改，Angular 服务将不会传递到您的函数中。

然后，当您在函数内部访问 $http 时，它应该访问传递给工厂的值，该值不应未定义。

【讨论】：

我很生气自己错过了这个！你是对的，我需要在定义中添加 $http。

【解决方案3】：

好的，Reboog711 让我走上了正轨，我需要修改我的工厂定义以包含 $http，我之前尝试过这样做，但错误地将它放在一起：

'$rootScope, $http'

不要这样做，这是不好的和错误的！但是 Reboog711 的回答也给了我错误，因为我认为您不能像我们都认为的那样使用 $scope。

正确（或有效）的解决方案是：

app.factory('quizService', ['$rootScope', '$http', function ($rootScope, $http) {

我希望这对 Angular 的其他新手有所帮助。非常感谢所有回复他们的 cmets 的人。我真的很尊重这个社区帮助他人的伟大态度:)

【讨论】：