Question

我收到一个奇怪的错误，似乎暗示我的控制器没有正确创建。谁能解释一下？这是我的第一个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＆amp; p1 =错误％3 ... 20d％20（http％3A％2F％2Flocalhost％3A4685％2FScripts％2Fangular。 min.js％3A17％3A381）

Answer 1

有一些问题。

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

您应该只使用所有依赖项执行此操作一次：

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

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

angular.module('ibosApp')

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

所以：

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

Answer 2

您的模块是否仅在模板中定义？如果这可能是您的问题，则应用程序尚未初始化，因为ng-app无法找到您尝试加载的模块。我将首先分离JavaScript和HTML，以使自己更容易。

参数＆＃39; customerCtrl＆＃39;不是aNaNunction，未定义

2 个答案: