gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 07:23:18 25 4
gpt4 key购买 nike

我收到一个奇怪的错误,似乎表明我的 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)

最佳答案

有些地方不对。

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

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

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

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

angular.module('ibosApp')
  1. 您不能像现在这样在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com