参数 'customerCtrl' 不是 aNaNunction，未定义答案

【问题标题】：Argument 'customerCtrl' is not aNaNunction, got undefined参数 'customerCtrl' 不是 aNaNunction，未定义
【发布时间】：2015-04-08 13:15:49
【问题描述】：

我收到一个奇怪的错误，似乎表明我的控制器没有正确创建。谁能解释一下？这是我的第一个 SPA 应用程序，所以我有点在黑暗中编程。

这是我的母版页：

<!DOCTYPE html>
<html ng-app="ibosApp">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>iBOS</title>
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/Scripts/bootstrap-select.js"></script>
    <script src="/angular/scripts/route-config.js"></script>
    <script src="/Scripts/bootstrap-select.js"></script>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="/Content/bootstrap-select.css" rel="stylesheet" />
    <link href="/Content/acs.css" rel="stylesheet"/>
    <script type="text/javascript">
        $(function () {
            $('.selectpicker').selectpicker();
        });
    </script>

</head>
<body>
    <div class="container body-content">
        <ng-view/>
    </div>
</body>
</html>

这是我的视图模板：

<div class="tab-content">
    <div id="customers" class="tab-pane fade active in top-buffer" ng-controller="customerCtrl">
        <form class="form-group">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <label for="customer-broker">Broker:</label>
                        <select class="selectpicker" id="customer-broker"></select>
                    </div>
                    <div class="col-sm-3">
                        <label for="customer-town">Town:</label>
                        <input type="text" class="form-control" id="customer-town"/>
                    </div>
                    <div class="col-sm-3">
                        <label for="customer-code">Code:</label>
                        <input type="text" class="form-control" id="customer-code"/>
                    </div>
                    <div class="col-sm-3">
                        <button ng-click="search()" class="btn">Search</button>
                        <button ng-click="myCustomers()" class="btn">My customers</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <label for="customer-company-name">Company name:</label>
                        <input type="text" class="form-control" id="customer-company-name"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <label for="customer-contact-name">Contact name:</label>
                        <input type="text" class="form-control" id="customer-contact-name"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <label for="customer-customer-id">Customer ID:</label>
                        <input type="text" class="form-control" id="customer-customer-id"/>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    angular.module('ibosApp', ['angular-bootstrap-select', 'ngRoute'])
        .controller("customerCtrl", function($scope, $http) {
                $scope.loadBrokers = function() {
                    $http.get("/api/customers/getBrokers").success(function(data) {
                        $scope.brokers = data;
                    });
                }

                $scope.loadBrokers();
            }
    );
</script>

但我收到错误“参数 'customerCtrl' 不是 aNaNunction，未定义”，并且从未调用控制器构造函数。谁能解释一下为什么？

编辑 - 更多代码

这是我的路线配置...

angular.module("ibosApp", ["ngRoute"])
    .config(function($routeProvider) {
        $routeProvider.otherwise({
            templateUrl: "/angular/components/booking-system/booking-system-template.html"
        });
    });

编辑 - 错误的完整堆栈跟踪

未捕获的错误：[$injector:modulerr] http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=ibosApp&p1=Error%3…20d%20(http%3A%2F%2Flocalhost%3A4685%2FScripts%2Fangular.min.js% 3A17%3A381)

【问题讨论】：

看看app和ctrl定义就好了
我认为您在 .controller( 中缺少匹配的 ")"
它们位于第二个列表的底部。尚未将它们移动到单独的文件中。
你在哪里定义 $routeProviders 配置？您使用 <ng-view> 指令，但 $routeProvider 无处可寻
我不认为我缺少')' Octav

标签： javascript angularjs

【解决方案1】：

有一些问题。

你设置ibosApp两次，即angular.module("ibosApp", ["ngRoute"])和angular.module("ibosApp", ['angular-bootstrap-select'])

您应该只对所有依赖项执行一次：

angular.module("ibosApp", ['ngRoute', 'angular-bootstrap-select']);

...然后使用getter语法，也一样，不带第二个参数：

angular.module('ibosApp')

你不能像你正在做的那样在视图中定义控制器除非你重新编译你的角度应用程序。最好将您的 javascript 放入一个单独的文件中，并将该脚本包含在您的索引页面上。这不起作用的原因是因为您的 Angular 应用程序编译一次，然后您加载视图并定义控制器，但 Angular 不知道该控件，因为当您编译它时它不存在。

所以：

app.js

angular.module("ibosApp", ["ngRoute", "angular-bootstrap-select"])
 .config(function($routeProvider) {
    $routeProvider.otherwise({
        templateUrl: "/angular/components/booking-system/booking-system-template.html"
    });
});

customerCtrl.js

angular.module('ibosApp').controller("customerCtrl", function($scope, $http) {
            $scope.loadBrokers = function() {
                $http.get("/api/customers/getBrokers").success(function(data) {
                    $scope.brokers = data;
                });
            }

            $scope.loadBrokers();
        }
);

你的标记是

// previous script tags
<script src="app.js"></script>
<script src="customerCtrl.js"></script>

【讨论】：

感谢汤姆的广泛回复。我完全按照你的建议做了，但现在我收到了different error
你能粘贴完整的堆栈跟踪吗
上面有问题的完整堆栈跟踪
我不认为这是完整的堆栈跟踪...但是，请确保您包含正确的脚本，无论 angular-bootstrap-select 是...我 90% 确定那是您的问题是要说谎的。
是的，我已经删除了该依赖项，它现在正在按预期加载。我将不得不调查下拉库（它真的相当不错）。谢谢汤姆。

【解决方案2】：

您的模块是否仅在模板中定义？如果这种情况可能是您的问题，则应用程序未初始化，因为 ng-app 找不到您要加载的模块。我将首先将 JavaScript 和 HTML 分开，以使自己更轻松。

【讨论】：

感谢 hochas，我已经按照 Tom 的建议（如下）实现了它。