admin管理员组

文章数量:1025235

I'm getting a curious error that seems to suggest my controller is not being created properly. Can anyone explain? This is my first SPA app so I'm programming in the dark a little bit.

Here is my master page:

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

Here is my view template:

<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-pany-name">Company name:</label>
                        <input type="text" class="form-control" id="customer-pany-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>

but I get the error "Argument 'customerCtrl' is not aNaNunction, got undefined" and the controller constructor is never called. Can anyone explain why?

M

EDIT - more code

Here is my route config...

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

EDIT - full stack trace of error

Uncaught Error: [$injector:modulerr] .3.13/$injector/modulerr?p0=ibosApp&p1=Error%3…20d%20(http%3A%2F%2Flocalhost%3A4685%2FScripts%2Fangular.min.js%3A17%3A381)

I'm getting a curious error that seems to suggest my controller is not being created properly. Can anyone explain? This is my first SPA app so I'm programming in the dark a little bit.

Here is my master page:

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

Here is my view template:

<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-pany-name">Company name:</label>
                        <input type="text" class="form-control" id="customer-pany-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>

but I get the error "Argument 'customerCtrl' is not aNaNunction, got undefined" and the controller constructor is never called. Can anyone explain why?

M

EDIT - more code

Here is my route config...

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

EDIT - full stack trace of error

Uncaught Error: [$injector:modulerr] http://errors.angularjs/1.3.13/$injector/modulerr?p0=ibosApp&p1=Error%3…20d%20(http%3A%2F%2Flocalhost%3A4685%2FScripts%2Fangular.min.js%3A17%3A381)

  • javascript
  • angularjs
Share Improve this question edited Apr 8, 2015 at 13:43 Tom 7,7401 gold badge26 silver badges49 bronze badges asked Apr 8, 2015 at 13:15 serlingpaserlingpa 12.7k26 gold badges89 silver badges146 bronze badges 7
  • It would be good to see the app and ctrl definition – maurycy Commented Apr 8, 2015 at 13:18
  • I think you are missing a matching ")" from .controller( – Octav Zlatior Commented Apr 8, 2015 at 13:19
  • They're at the bottom of the second listing. Have yet to move them into a separate file. – serlingpa Commented Apr 8, 2015 at 13:19
  • where do you define the $routeProviders configs? you use a <ng-view> Directive but nowhere is the $routeProvider – Nano Commented Apr 8, 2015 at 13:19
  • I don't think I am missing a ')' Octav – serlingpa Commented Apr 8, 2015 at 13:21
 |  Show 2 more ments

2 Answers 2

Reset to default 8

There's a few things wrong.

  1. You're setting ibosApp twice, i.e., angular.module("ibosApp", ["ngRoute"]) and angular.module("ibosApp", ['angular-bootstrap-select'])

You should only do this once, with all of your dependencies:

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

...and then use the getter syntax, which is the same, without the second parameter:

angular.module('ibosApp')
  1. You can't define controllers in the view like you're doing unless you re-pile your angular app. It would be best to put your javascript into a separate file and include that script on your index page. The reason this isn't working is because your angular app piles one time, then you load the view and define the controller, but angular doesn't know about that control since it wasn't there when you piled it.

So:

app.js

angular.module("ibosApp", ["ngRoute", "angular-bootstrap-select"])
 .config(function($routeProvider) {
    $routeProvider.otherwise({
        templateUrl: "/angular/ponents/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();
        }
);

And your markup would be

// previous script tags
<script src="app.js"></script>
<script src="customerCtrl.js"></script>

Is your module only defined in the template? If that's the case that might be your problem, the app isn't initialized since ng-app can't find the module you're trying to load. I would begin with separating JavaScript and HTML to make it easier on yourself.

I'm getting a curious error that seems to suggest my controller is not being created properly. Can anyone explain? This is my first SPA app so I'm programming in the dark a little bit.

Here is my master page:

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

Here is my view template:

<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-pany-name">Company name:</label>
                        <input type="text" class="form-control" id="customer-pany-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>

but I get the error "Argument 'customerCtrl' is not aNaNunction, got undefined" and the controller constructor is never called. Can anyone explain why?

M

EDIT - more code

Here is my route config...

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

EDIT - full stack trace of error

Uncaught Error: [$injector:modulerr] .3.13/$injector/modulerr?p0=ibosApp&p1=Error%3…20d%20(http%3A%2F%2Flocalhost%3A4685%2FScripts%2Fangular.min.js%3A17%3A381)

I'm getting a curious error that seems to suggest my controller is not being created properly. Can anyone explain? This is my first SPA app so I'm programming in the dark a little bit.

Here is my master page:

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

Here is my view template:

<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-pany-name">Company name:</label>
                        <input type="text" class="form-control" id="customer-pany-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>

but I get the error "Argument 'customerCtrl' is not aNaNunction, got undefined" and the controller constructor is never called. Can anyone explain why?

M

EDIT - more code

Here is my route config...

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

EDIT - full stack trace of error

Uncaught Error: [$injector:modulerr] http://errors.angularjs/1.3.13/$injector/modulerr?p0=ibosApp&p1=Error%3…20d%20(http%3A%2F%2Flocalhost%3A4685%2FScripts%2Fangular.min.js%3A17%3A381)

  • javascript
  • angularjs
Share Improve this question edited Apr 8, 2015 at 13:43 Tom 7,7401 gold badge26 silver badges49 bronze badges asked Apr 8, 2015 at 13:15 serlingpaserlingpa 12.7k26 gold badges89 silver badges146 bronze badges 7
  • It would be good to see the app and ctrl definition – maurycy Commented Apr 8, 2015 at 13:18
  • I think you are missing a matching ")" from .controller( – Octav Zlatior Commented Apr 8, 2015 at 13:19
  • They're at the bottom of the second listing. Have yet to move them into a separate file. – serlingpa Commented Apr 8, 2015 at 13:19
  • where do you define the $routeProviders configs? you use a <ng-view> Directive but nowhere is the $routeProvider – Nano Commented Apr 8, 2015 at 13:19
  • I don't think I am missing a ')' Octav – serlingpa Commented Apr 8, 2015 at 13:21
 |  Show 2 more ments

2 Answers 2

Reset to default 8

There's a few things wrong.

  1. You're setting ibosApp twice, i.e., angular.module("ibosApp", ["ngRoute"]) and angular.module("ibosApp", ['angular-bootstrap-select'])

You should only do this once, with all of your dependencies:

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

...and then use the getter syntax, which is the same, without the second parameter:

angular.module('ibosApp')
  1. You can't define controllers in the view like you're doing unless you re-pile your angular app. It would be best to put your javascript into a separate file and include that script on your index page. The reason this isn't working is because your angular app piles one time, then you load the view and define the controller, but angular doesn't know about that control since it wasn't there when you piled it.

So:

app.js

angular.module("ibosApp", ["ngRoute", "angular-bootstrap-select"])
 .config(function($routeProvider) {
    $routeProvider.otherwise({
        templateUrl: "/angular/ponents/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();
        }
);

And your markup would be

// previous script tags
<script src="app.js"></script>
<script src="customerCtrl.js"></script>

Is your module only defined in the template? If that's the case that might be your problem, the app isn't initialized since ng-app can't find the module you're trying to load. I would begin with separating JavaScript and HTML to make it easier on yourself.

本文标签： javascriptArgument 39customerCtrl39 is not aNaNunctiongot undefinedStack Overflow

版权声明：本文标题：javascript - Argument &#39;customerCtrl&#39; is not aNaNunction, got undefined - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745037736a2131001.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。