AngularJS控制器不是函数错误

时间:2015-06-10 13:37:06

标签: javascript angularjs

ng-controller="HeaderController"添加到div时,我收到错误。

Error: ng:areq
Bad Argument
Argument 'HeaderController' is not a function, got undefined

我的HTML看起来像这样:

<div ng-app="myApp">
    <div ng-controller="HeaderController">
    </div>
    <div ng-controller="PostController">
    </div>
</div>

我还包括以下文件:

MyApp.js

var myApp = angular.module('myApp', ['postServices', 'angularFileUpload', 'ngSanitize', 'ui.date', 'bootstrapLightbox', 'profileServices']);

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这个文件的开头看起来像是:

   myApp.controller('PostController', ['$scope', 'PostServices', '$http', 'FileUploader', 'Lightbox',function($scope, PostServices, $http, FileUploader, Lightbox) {

PostService.js包含一个名为postServices的模块,它包含一个服务PostServices

angular.module('postServices', [])
    .service('PostServices', ['$http', function($http) {

如果我删除ng-controller="HeaderController",一切正常。

有谁知道可能是什么问题?

3 个答案:

答案 0 :(得分:1)

在您的模块中,您可以在开始时无需资金添加postServices,同时将其作为PostServices添加到headercontroller中。这可能会影响你的headercontroller的形成。

其中任何一个都可能是拼写错误,但是按照['PostService',位中的定义(在.service或.factory中)精确注入服务非常重要。因此,如果调用该服务:postService,则应将其注入控制器中:['postService, function(someNameThatDoesntMatter)如果调用PostService,则将其注入['PostService', function(someNameThatDoesntMatter)

正如我刚才所示,您之后如何在函数参数中调用它取决于您。

<强>更新

您可以为控制器创建一个模块来解决此问题。确保在此模块中注入postServices。然后在myApp模块中注入控制器模块:-)以这种结构化方式工作的好处是,你可以创建一个包含你的JS的结构,你可以在你工作的每个项目上应用它。

答案 1 :(得分:0)

好像很喜欢

您忘记在index.html中包含HeaderController.js文件。

确保您的HeaderController.js已正确加载。

在gulp / grunt过程中遗漏了一些地方。

答案 2 :(得分:0)

我不知道您使用哪个版本的Angular,我为我的plunk示例选择了1.4.0并尝试限制您提供的代码以查看是否重新创建了错误。

我不得不更多地处理脚本包含顺序。它创造了错误。正确的顺序是为了让它发挥作用

<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

所以主要是在HeaderController之前定义PostService.js