[英]Why is $http.get() undefined in my Angular service?
I'm trying to load some JSON and store it using $rootScope so that it persists between controllers. 我正在尝试加载一些JSON并使用$ rootScope进行存储,以使其在控制器之间持久存在。 When I run my app I get the following error:
当我运行我的应用程序时,出现以下错误:
TypeError: Cannot call method 'get' of undefined
The get method was working perfectly until I tried to introduce $rootScope... any ideas? 在我尝试引入$ rootScope之前,get方法一直运行良好...有什么想法吗?
My service looks like this: 我的服务如下所示:
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 }]);
My controller looks like this: 我的控制器如下所示:
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 });
You are using the 'array pattern' in defining your factory. 您在定义工厂时使用了“阵列模式”。 You should have a string for each of the services you use in your function, but you only have one.
您应该在函数中使用的每个服务都有一个字符串,但是只有一个。
That is, what you do is 也就是说,你要做的是
app.factory('quizService', ['$rootScope', function ($scope, $rootScope, $http) {
//insert code
}]);
but what you should do is 但是你应该做的是
app.factory('quizService', ['$scope', '$rootScope', '$http', function ($scope, $rootScope, $http) {
//insert code
}]);
AngularJS will map the functions named with the strings to the parameters. AngularJS将使用字符串命名的函数映射到参数。 Try that and see if it fixes your issue.
试试看,看看是否能解决您的问题。
EDIT : Ah,the answer from Reboog711 makes more sense in solving the issue, I somehow missed the latter part of the code. 编辑 :啊,Reboog711的答案在解决该问题上更有意义,我不知何故错过了代码的后半部分。 But I'm leaving this answer in since you should also fix the factory definition.
但是我留下这个答案,因为您还应该修复工厂定义。
getQuiz is a function inside a factory: getQuiz是工厂内部的函数:
getQuiz: function($scope, $http) {
When you call the getQuiz, you do not pass any arguments into it: 调用getQuiz时,不会在其中传递任何参数:
quizService.getQuiz()
$http is undefined because you call it without passing any arguments into it. $ http是未定义的,因为您在调用它时未传递任何参数。 Angular will not inject items into a function that you call manually.
Angular不会将项目注入到您手动调用的函数中。 It will only do so with functions that AngularJS calls itself--such as controller or factory functions.
它将仅使用AngularJS调用的函数(例如控制器或工厂函数)来执行此操作。
So, you have a few options. 因此,您有一些选择。 One is to pass the $scope and $http arguments into the function, like this:
一种是将$ scope和$ http参数传递给函数,如下所示:
quizService.getQuiz($scope, $http)
I'm sure this would solve the issue, but it would be a weird approach for sure. 我敢肯定,这将解决问题,但这肯定是一种怪异的方法。
I would probably remove the $scope and $http functions out of the function definition: 我可能会从函数定义中删除$ scope和$ http函数:
getQuiz: function() {
Then make sure that you modify your factory definition: 然后确保您修改了出厂定义:
app.factory('quizService', ['$scope','$rootScope','$http', function ($scope, $rootScope, $http) {
Without this modification, the Angular services will not be passed into your function. 没有此修改,Angular服务将不会传递到您的函数中。
Then, when you access $http inside the function, it should access the value passed into the factory which should not be undefined. 然后,当您在函数内部访问$ http时,它应访问传递给工厂的值,该值不应是未定义的。
OK, Reboog711 put me on the right track, I needed to modify my factory definition to include $http, I had previously tried to do this, but mistakenly put it together like this: 好的,Reboog711使我走上了正确的轨道,我需要修改我的工厂定义以包含$ http,我以前曾尝试这样做,但错误地将其像这样放在一起:
'$rootScope, $http'
Don't do this, it's bad and wrong! 不要这样做,这是好事,也是错误的! But Reboog711's answer also gave me errors because I think you can't use $scope in the way we both thought.
但是Reboog711的回答也给了我错误,因为我认为您不能以我们都认为的方式使用$ scope。
The correct (or working) solution was: 正确的(或有效的)解决方案是:
app.factory('quizService', ['$rootScope', '$http', function ($rootScope, $http) {
I hope this helps other newcomers to Angular. 我希望这可以帮助Angular的其他新手。 Many thanks to all who replied with their comments.
非常感谢所有回答评论的人。 I really respect this community for its great attitude to helping others :)
我非常尊重这个社区对帮助他人的态度:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.