自变量'customerCtrl'不是NaNuction，未定义

Argument 'customerCtrl' is not aNaNunction, got undefined

本文关键字：未定义 NaNuction customerCtrl 自变量 不是      更新时间：2023-09-26

我收到一个奇怪的错误，似乎表明我的控制器没有正确创建。有人能解释一下吗？这是我的第一个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'不是aNaNaction，未定义"，并且从未调用控制器构造函数。有人能解释一下原因吗？

M

编辑-更多代码

这是我的路线配置。。。

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=错误%3…20d%20（http%3A%2F%2Flocalhost%3A4685%2FScripts%2Angular.min.js%3A17%3A381）

有一些错误。

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

对于所有的依赖项，您应该只做一次：

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

然后使用getter语法，这是相同的，没有第二个参数：

angular.module('ibosApp')
  1. 除非重新编译您的angular应用程序，否则您无法像执行那样在视图中定义控制器。最好将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>

您的模块是否仅在模板中定义？如果是这种情况，可能是你的问题，应用程序没有初始化，因为ng应用程序找不到你试图加载的模块。我将从分离JavaScript和HTML开始，让它对您自己更容易。

相关文章：