我参与了我的角度应用程序,我将控制器绑定在一起 从那以后我得到了参数'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 head中的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>
答案 0 :(得分:154)
问题在于使用'错误'语法来创建服务
而不是使用:
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);
}
]);
我很快用参数关闭了数组,因为我还在学习,所以我没有直接看到它,无论如何我希望我可以帮助那些偶然发现它的人。
答案 1 :(得分:9)
今天我犯了同样的错误,犯了这个愚蠢的错误:
(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){
...
}
}());
实际上字符串&#34; myFactory&#34;被带入正在等待功能但不是字符串的注射器。 这解释了[ng:areq]错误。
答案 2 :(得分:4)
以上答案帮助我大大纠正了我在应用程序中出现的同一问题,该问题源于不同的原因。
在构建时,我的客户端应用程序正在连接和缩小,所以我特意写了我的Angular以避免相关问题。我将config
定义如下
config.$inject = [];
function config() {
// config stuff
}
(我定义了一个函数,$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
有一个单一的实例,因此当config
注册时,Angular不接受名称。
答案 3 :(得分:1)
我有同样的问题,在我的情况下问题出在angular-cookies.js文件中。它与其他angularjs脚本在文件夹中,当我使用gulp缩小我的js文件时发生错误。
简单的解决方案就是将angular-cookies.js文件放在所选文件夹之外的另一个文件夹中以缩小js文件。
答案 4 :(得分:0)
我的案子
let app: any = angular.module("ngCartosServiceWorker"),
requires: any[] = [
"$log",
"$q",
"$rootScope",
"$window",
"ngCartosServiceWorker.registration",
PushNotification
];
app.service("ngCartosServiceWorker.PushNotification");
我忘了添加要求数组作为参数来像这样服务
app.service("ngCartosServiceWorker.PushNotification", requires);