Html 参数 'fn' 不是一个函数得到的字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19095129/
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
Argument 'fn' is not a function got string
提问by J.Pip
I have a part in my angular application on which I've binded a controller,
since then I got the Argument 'fn' is not a function Error, can anyone look at my code and explain why I got that Error?
我在我的 angular 应用程序中绑定了一个控制器，
从那时起我得到了参数“fn”不是函数错误，任何人都可以查看我的代码并解释为什么我得到了那个错误？
I would be very gratefull :)
我将不胜感激:)
html-markup:
html 标记：
<section class="col-lg-12" data-ng-controller="MessageController">
<fieldset>
<legend>{{ 'MESSAGES' | translate }}</legend>
</fieldset>
<div class="margin-left-15">
<ul class="list-style-button">
<li data-ng-repeat="message in MSG">{{ message }}</li>
</ul>
</div>
</section>
controller:
控制器：
(function() {
'use strict';
var controllers = angular.module('portal.controllers');
controllers.controller('MessageController', ['$scope', 'MessageService', '$rootScope', function MessageController($scope, MessageService, $rootScope) {
$rootScope.MSG = MessageService.getMessages();
$rootScope.$watch('MSG', function(newValue) {
$scope.MSG = newValue;
});
}]);
}());
Service:
服务：
(function() {
'use strict';
var messageServices = angular.module('portal.services');
messageServices.factory('MessageService', ['MessageData', 'localStorageService', 'UserService'], function(MessageData, localStorageService, UserService) {
return new MessageService(MessageData, localStorageService, UserService);
});
function MessageService(MessageData, localStorageService, UserService) {
this.messageData = MessageData;
this.localStorageService = localStorageService;
this.userService = UserService;
}
MessageService.prototype.getMessages = function() {
var locale = this.userService.getUserinfoLocale();
var messages = this.localStorageService.get(Constants.key_messages + locale);
if (messages !== null && messages !== undefined) {
return JSON.parse(messages);
} else {
return this.messageData.query({
locale: locale
}, $.proxy(function(data, locale) {
this.save(Constants.key_messages + locale, JSON.stringify(data));
}, this));
}
};
MessageService.prototype.save = function(key, value) {
this.localStorageService.add(key, value);
};
}());
data:
数据：
(function() {
'use strict';
var data = angular.module('portal.data');
data.factory('MessageData', function($resource) {
return $resource(Constants.url_messages, {}, {
query: {
method: 'GET',
params: {
locale: 'locale'
},
isArray: true
}
});
});
}());
order of js files in html head:
html头中js文件的顺序：
<script src="js/lib/jquery-1.10.js"></script>
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-resource.js"></script>
<script src="js/lib/angular-translate.js"></script>
<script src="js/lib/angular-localstorage.js"></script>
<script src="js/lib/jquery-cookies.js"></script>
<script src="js/lib/bootstrap.js"></script>
<script src="js/portal.js"></script>
回答by J.Pip
The problem was in using the 'wrong' syntax to create the service
instead of using:
问题在于使用“错误”的语法来创建服务
而不是使用：
messageServices.factory('MessageService',
['MessageData','localStorageService', 'UserService'],
function(MessageData, localStorageService, UserService){
return new MessageService(MessageData, localStorageService, UserService);
}
);
I had to use:
我不得不使用：
messageServices.factory('MessageService',
['MessageData','localStorageService', 'UserService',
function(MessageData, localStorageService, UserService){
return new MessageService(MessageData, localStorageService, UserService);
}
]);
I closed the array with parameters to soon, and since I'm still learning I didn't see it directly, anyhow I hope I can help others who stumble upon this.
我很快用参数关闭了数组，由于我还在学习，我没有直接看到它，无论如何我希望我可以帮助其他偶然发现的人。
回答by Xavier Haniquaut
Today I got the same kind of error doing that silly mistake:
今天我犯了同样的错误，犯了那个愚蠢的错误：
(function(){
angular
.module('mymodule')
.factory('myFactory', 'myFactory'); // <-- silly mistake
myFactory.$inject = ['myDeps'];
function myFactory(myDeps){
...
}
}());
instead of that:
而不是：
(function(){
angular
.module('mymodule')
.factory('myFactory', myFactory); // <-- right way to write it
myFactory.$inject = ['myDeps'];
function myFactory(myDeps){
...
}
}());
In fact the string "myFactory" was brought into the injector who was waiting for a function and not a string. That explained the [ng:areq] error.
事实上，字符串“myFactory”被带入等待函数而不是字符串的注入器。这解释了 [ng:areq] 错误。
回答by svarog
The above answers helped me considerably in correcting the same issue I had in my application that arose from a different cause.
上述答案极大地帮助我纠正了我在申请中遇到的由不同原因引起的相同问题。
At built time, my client app is being concatenated and minified, so I'm writing my Angular specifically to avoid related issues. I define my configas follows
在构建时，我的客户端应用程序被连接和缩小，所以我专门编写我的 Angular 以避免相关问题。我定义config如下
config.$inject = [];
function config() {
// config stuff
}
(I define a function, $injectit as a module and declare what it is).
（我将一个函数定义$inject为一个模块并声明它是什么）。
And then I tried to register the configjust as I registered other modules in my app (controllers, directives, etc..).
然后我尝试注册config就像我在我的应用程序中注册其他模块（控制器、指令等）一样。
angular.module("app").config('config', config); // this is bad!
// for example, this is right
angular.module("app").factory('mainService', mainService);
This is wrong, and gave me the aforementioned error. So I changed to
这是错误的，并给了我上述错误。所以我改为
angular.module("app").config(config);
And it worked.
I guess the angular devs intended configto have a singular instance and by so having Angular not accept a name when configis registered.
它奏效了。我猜角开发人员打算config拥有一个单一的实例，因此让 Angular 在config注册时不接受名称。
回答by Münich
I had the same issue and In my case the problem was with angular-cookies.js file. It was in folder with other angularjs scripts and when I have used gulp to minify my js files the error occured.
我遇到了同样的问题，就我而言，问题出在 angular-cookies.js 文件上。它与其他 angularjs 脚本位于文件夹中，当我使用 gulp 缩小我的 js 文件时，发生了错误。
Simple solution was just to place the angular-cookies.js file to another folder, outside the selected folder to minify js files.
简单的解决方案是将 angular-cookies.js 文件放在另一个文件夹中，在所选文件夹之外以缩小 js 文件。
回答by spacedev
My case
我的情况
let app: any = angular.module("ngCartosServiceWorker"),
requires: any[] = [
"$log",
"$q",
"$rootScope",
"$window",
"ngCartosServiceWorker.registration",
PushNotification
];
app.service("ngCartosServiceWorker.PushNotification");
I forgot to add requires Array as parameters to service like this
我忘了添加需要数组作为参数来服务这样的
app.service("ngCartosServiceWorker.PushNotification", requires);
