javascript 正确使用自定义angularjs服务,函数未定义错误
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/23951611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Properly use custom angularjs service, function not defined error
提问by user3668232
I created my own service for some util methods. The idea was to simply inject the utilsservice into the modules where I need the methods. The Problem is I get an ReferrenceError: myFunction is not defined.
我为一些 util 方法创建了自己的服务。这个想法是简单地将 utilsservice 注入到我需要这些方法的模块中。问题是我收到一个 ReferrenceError: myFunction is not defined。
I think it has to do with the wrong injecting of the service, but i can't figute out myself what's wrong with my approach.
我认为这与错误的服务注入有关,但我无法弄清楚我的方法有什么问题。
The service i made:
我做的服务:
angular.module('utils',[]).service('UtilsService',function(){
this.myFunction = function(){};
});
In my app.js file i have following structure:
在我的 app.js 文件中,我有以下结构:
(function(){
angular.module('utils',[]);
angular.module('translation',[]);
var app = angular.module('myApp',['translation','utils']);
app.controller('myController',['$http',function($http,UtilsService){
UtilsService.myFunction();
}]);
});
The order I included the scripts in my .html file:
我在 .html 文件中包含脚本的顺序:
<script type="text/javascript" src="../Libraries/angular.min.js"></script>
<script type="text/javascript" src="../js/angular-js/services/utilService.js"></script>
<script type="text/javascript" src="../js/angular-js/app.js"></script>
<script type="text/javascript" src="../js/angular-js/translate.js"></script>
I already tried to change the order but it doesn't make any difference.
我已经尝试更改顺序,但没有任何区别。
I am thankfull for any advice you may have!
我很感激你的任何建议!
回答by Rahul Garg
Please try the below. You will need to change the script references to point to the files where you have them. Once the index.html file has loaded, you should see the output "you called myFunction()" in the console window. That is being printed from within the service which shows it's being called correctly. I've also created a fiddle
请尝试以下。您将需要更改脚本引用以指向您拥有它们的文件。加载 index.html 文件后,您应该会在控制台窗口中看到输出“您调用了 myFunction()”。这是从服务内部打印的,表明它被正确调用。我还创建了一个小提琴
index.html:
索引.html:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Directives</title>
</head>
<body>
<div ng-controller="myController"></div>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="utilsService.js"></script>
</body>
</html>
app.js (I have moved the code out of the function you created since it wasn't working. Also, you had a typo for spelling anguar on the line that begins with var app. I have also removed the dependency for translation in my code since I didn't create any module by that name):
app.js(我已将代码从您创建的函数中移出,因为它无法正常工作。此外,您在以 var app 开头的行上拼写 anguar 时有错误。我还删除了我的代码,因为我没有以该名称创建任何模块):
(function(){
//angular.module('utils',[]);
//angular.module('translation',[]);
});
var app = angular.module('myApp',['utils']);
app.controller('myController',['$scope', 'UtilsService',function($scope,UtilsService){
UtilsService.myFunction();
}]);
utilsService.js:
utilsService.js:
angular.module('utils',[])
.service('UtilsService',function(){
this.myFunction = function(){ console.log ('you called myFunction()')};
});