[英]AngularJS Controller is not a function error
I'm getting error when adding ng-controller="HeaderController"
to a div. 将ng-controller="HeaderController"
到div时出现错误。
Error: ng:areq
Bad Argument
Argument 'HeaderController' is not a function, got undefined
my HTML looks like that: 我的HTML看起来像这样:
<div ng-app="myApp">
<div ng-controller="HeaderController">
</div>
<div ng-controller="PostController">
</div>
</div>
Also I include following files: 我还包括以下文件:
MyApp.js MyApp.js
var myApp = angular.module('myApp', ['postServices', 'angularFileUpload', 'ngSanitize', 'ui.date', 'bootstrapLightbox', 'profileServices']);
HeaderController.js HeaderController.js
myApp.controller('HeaderController', ['$scope', 'PostServices', '$http', function($scope, PostServices, $http) {
$scope.getBookmarksCount = function() {
PostServices.getBookmarksCount().then(function(response) {
if (response.data.status == 'success') {
$scope.bookmarksCount = response.data.bookmarksCount;
} else {
$scope.errorMessage = response.data.message;
}
})
};
}]);
PostController.js beggining of this file looks like: 该文件的PostController.js开头如下:
myApp.controller('PostController', ['$scope', 'PostServices', '$http', 'FileUploader', 'Lightbox',function($scope, PostServices, $http, FileUploader, Lightbox) {
PostService.js contains a module named postServices
and it contains a service PostServices
: PostService.js包含一个名为postServices
的模块,并且包含一个服务PostServices
:
angular.module('postServices', [])
.service('PostServices', ['$http', function($http) {
if I delete ng-controller="HeaderController"
everything works fine. 如果我删除ng-controller="HeaderController"
一切正常。
Does anyone knows what could be the problem? 有谁知道可能是什么问题?
In your module you add the postServices without a capital at the start, while you add it in your headercontroller as PostServices. 在您的模块中,开始时添加不带大写字母的postServices,而将其作为PostServices添加到标头控制器中。 This might mess with the forming of your headercontroller. 这可能会与headercontroller的形成混乱。
Either one of those could be a typo, but it is very important that you inject the service precisely as it is defined (in your .service or .factory) in the ['PostService',
bit. 这些中的任何一个都可能是错字,但是非常重要的一点是,要准确地注入在['PostService',
位中定义的服务(在.service或.factory中)。 So if the service is called: postService, you should inject it in your controller as: ['postService, function(someNameThatDoesntMatter)
if its called PostService, inject it as ['PostService', function(someNameThatDoesntMatter)
因此,如果服务被称为:postService,则应将其注入到控制器中: ['postService, function(someNameThatDoesntMatter)
如果其被称为PostService,则将其注入为['PostService', function(someNameThatDoesntMatter)
As I just shown, how you call it afterwards in the function parameter is up to you. 正如我刚刚展示的,此后如何在function参数中调用它取决于您。
Update 更新资料
You could create a module for your controllers to fix this. 您可以为控制器创建一个模块来解决此问题。 Make sure to inject your postServices in this module aswell. 确保将您的postServices也注入此模块中。 Then inject the controllers module in your myApp module :-) The benefit of working in a structured way like this, is that you can create a structure of including your JS which you can apply on every project you work on. 然后将controllers模块插入myApp模块中:-)以这种结构化方式进行工作的好处是,您可以创建一个包含JS的结构,该结构可应用于您处理的每个项目。
It seems likes 好像喜欢
you forget include that HeaderController.js
file in index.html. 您会忘记将HeaderController.js
文件包含在index.html中。
Make sure your HeaderController.js
is loaded properly. 确保正确加载了HeaderController.js
。
Missing some where in gulp/grunt process. 在gulp / grunt过程中缺少某些地方。
I don't know which version of Angular you use , I took 1.4.0 for my plunk example and try just to limit to the code you provide to see if I recreated the error. 我不知道您使用的是哪个版本的Angular,我以1.4.0为示例,并尝试仅限制于您提供的代码,以查看是否重新创建了错误。
I had to deal more with scripts inclusion order. 我不得不处理更多的脚本包含顺序。 It created error. 它创建了错误。 The right order in order to make it work is 为了使其正常工作的正确顺序是
<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/1.4.0/angular.js"></script>
<script src="MyApp.js"></script>
<script src="PostController.js"></script>
<script src="PostService.js"></script>
<script src="HeaderController.js"></script>
http://plnkr.co/edit/NhzQFmI1s9r98uAMZwYg http://plnkr.co/edit/NhzQFmI1s9r98uAMZwYg
So Main point was to defined PostService.js before HeaderController 所以重点是在HeaderController之前定义PostService.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.