ser*_*gpa 1 javascript angularjs
我收到一个奇怪的错误,似乎表明我的控制器没有正确创建.谁能解释一下？这是我的第一个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>
但我收到错误"Argument'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 =错误%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')
所以:
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>
| 归档时间： |
|
| 查看次数： |
2730 次 |
| 最近记录： |