[英]Argument 'fn' is not a function got string
我在我的角度應用程序中有一部分,我已經綁定了一個控制器,
從那以后我得到了參數'fn'不是函數錯誤,任何人都可以查看我的代碼並解釋為什么我得到了這個錯誤?
我會非常感激:)
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>
控制器:
(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;
});
}]);
}());
服務:
(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);
};
}());
數據:
(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
}
});
});
}());
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>
問題在於使用“錯誤”語法來創建服務
而不是使用:
messageServices.factory('MessageService',
['MessageData','localStorageService', 'UserService'],
function(MessageData, localStorageService, UserService){
return new MessageService(MessageData, localStorageService, UserService);
}
);
我不得不使用:
messageServices.factory('MessageService',
['MessageData','localStorageService', 'UserService',
function(MessageData, localStorageService, UserService){
return new MessageService(MessageData, localStorageService, UserService);
}
]);
我很快就用參數關閉了數組,因為我還在學習,我沒有直接看到它,無論如何我希望我可以幫助那些偶然發現它的人。
今天我犯了同樣的錯誤,做了那個愚蠢的錯誤:
(function(){
angular
.module('mymodule')
.factory('myFactory', 'myFactory'); // <-- silly mistake
myFactory.$inject = ['myDeps'];
function myFactory(myDeps){
...
}
}());
而不是:
(function(){
angular
.module('mymodule')
.factory('myFactory', myFactory); // <-- right way to write it
myFactory.$inject = ['myDeps'];
function myFactory(myDeps){
...
}
}());
事實上,字符串“myFactory”被帶入正在等待函數而不是字符串的注入器中。 這解釋了[ng:areq]錯誤。
以上答案幫助我大大糾正了我在應用程序中出現的同一問題,該問題源於不同的原因。
在構建時,我的客戶端應用程序正在連接和縮小,所以我正在編寫我的Angular專門用於避免相關問題。 我定義我的config
如下
config.$inject = [];
function config() {
// config stuff
}
(我定義了一個函數, $inject
它作為模塊$inject
並聲明它是什么)。
然后我嘗試注冊config
就像我在我的應用程序中注冊其他模塊(控制器,指令等...)。
angular.module("app").config('config', config); // this is bad!
// for example, this is right
angular.module("app").factory('mainService', mainService);
這是錯的,並且給了我上面提到的錯誤。 所以我改為
angular.module("app").config(config);
它奏效了。 我想角度開發者打算config
一個單一的實例,因此讓Angular在注冊config
時不接受名稱。
我有同樣的問題,在我的情況下問題是angular-cookies.js文件。 它與其他angularjs腳本在文件夾中,當我使用gulp縮小我的js文件時發生錯誤。
簡單的解決方案是將angular-cookies.js文件放在所選文件夾之外的另一個文件夾中以縮小js文件。
我的情況
let app: any = angular.module("ngCartosServiceWorker"),
requires: any[] = [
"$log",
"$q",
"$rootScope",
"$window",
"ngCartosServiceWorker.registration",
PushNotification
];
app.service("ngCartosServiceWorker.PushNotification");
我忘了添加Require Array作為服務的參數,就像這樣
app.service("ngCartosServiceWorker.PushNotification", requires);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.