javascript - 参数 'customerCtrl' 不是 NaNunction，未定义-6ren

javascript - 参数 'customerCtrl' 不是 NaNunction，未定义

转载作者：行者123 更新时间：2023-11-30 07:23:18

我收到一个奇怪的错误，似乎表明我的 Controller 没有正确创建。谁能解释一下？这是我的第一个 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>

这是我的 View 模板:

<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>

但我收到错误“Argument 'customerCtrl' is not aNaNunction, got undefined”并且从未调用 Controller 构造函数。谁能解释一下为什么？

中号

编辑 - 更多代码

这是我的路由配置...

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

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

Uncaught Error: [$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)

最佳答案

有些地方不对。

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

对于所有依赖项，您应该只执行一次:

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

...然后使用getter语法，是一样的，只是没有第二个参数:

angular.module('ibosApp')

您不能像现在这样在 View 中定义 Controller ，除非您重新编译您的 Angular 应用程序。最好将您的 javascript 放入一个单独的文件中，并将该脚本包含在您的索引页中。这不起作用的原因是因为您的 Angular 应用程序编译一次，然后您加载 View 并定义 Controller ，但是 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>

关于javascript - 参数 'customerCtrl' 不是 NaNunction，未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29515734/

文章推荐： Java:删除选定的行结果集，而是从数据库中删除最后一行？

文章推荐： javascript - 这些 JavaScript 匿名函数有什么区别？

文章推荐： javascript - IE8 - IsArray() 获取预期的错误对象

文章推荐： javascript - 将样式表添加到 Express 应用程序

javascript - 参数 'customerCtrl' 不是 NaNunction，未定义
我收到一个奇怪的错误，似乎表明我的 Controller 没有正确创建。谁能解释一下？这是我的第一个 SPA 应用程序，所以我在黑暗中进行了一点编程。这是我的主页:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 参数 'customerCtrl' 不是 NaNunction，未定义