javascript - AngularJS Controller 不是函数错误

Question

将 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" 一切正常。

有谁知道可能是什么问题吗？

Answer 1

在您的模块中，您添加开头不带大写的 postServices，同时将其添加到 header Controller 中作为 PostServices。这可能会扰乱 header Controller 的形成。

其中任何一个都可能是拼写错误，但非常重要的是，您必须按照 ['PostService', 中定义的服务(在您的 .service 或 .factory 中)精确地注入(inject)服务。少量。因此，如果服务被称为:postService，您应该将其注入(inject) Controller 中: ['postService, function(someNameThatDoesntMatter) 如果它被称为 PostService，则将其注入(inject)为 ['PostService', function (someNameThatDoesntMatter)

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

更新

您可以为 Controller 创建一个模块来解决此问题。确保也在该模块中注入(inject)您的 postServices。然后将 Controller 模块注入(inject)到您的 myApp 模块中:-) 以这样的结构化方式工作的好处是，您可以创建一个包含 JS 的结构，您可以将其应用到您从事的每个项目中。