CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveautocompleteangularjs-scope
Ivegotaquestion
Ivegotaquestion

Reputation: 187

AngularJS - why "Error: ng:areq Bad Argument"?

I am trying to follow this example but all I got is 

Error: ng:areq
Bad Argument
Argument 'DefaultCtrl' is not a function, got undefined

Can anyone tell exactly why? DefaultCtrl is there, why it is not seen?

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.js"></script>
    <script>
        function DefaultCtrl($scope) {
            $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
        }

        angular.module('app', []).directive('autoComplete', function($timeout) {
            return function(scope, iElement, iAttrs) {
                    iElement.autocomplete({
                        source: scope[iAttrs.uiItems],
                        select: function() {
                            $timeout(function() {
                              iElement.trigger('input');
                            }, 0);
                        }
                    });
            };
        });
    </script>

</head>

<body>
    <form method=post>
    <div ng-app='app' >
        <div ng-controller='DefaultCtrl'>
            <input auto-complete ui-items="names" ng-model="selected">
            selected = {{selected}}
        </div>
    </div>
    <input type=submit>
    </form>
</body>
</html>

Upvotes: 0

Views: 1735

Answers (4)

An Nguyen
An Nguyen

Reputation: 800

Controller should be declare as below:

var app = angular.module("app", ["ngRoute", ...]);    

app.controller("DefaultCtrl", ["$scope", ..., function($scope){
      $scope.names = ["john"];
}]);

Upvotes: 0

Kiki Gerritsen
Kiki Gerritsen

Reputation: 1

First of all, the {{selected}} $scope variable has not been defined.

Second, your controller has not been defined. Thats why it got undefined.

var myApp = angular.module('myApp',[]);

myApp.controller('DefaultController', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]);

https://docs.angularjs.org/guide/controller

Third, based on performance for your website, put your Javascript in an external file and load it after the DOM has been loaded. Except if you need your Javascript available before the website has completely rendered. Otherwise it blocks your webpage loading.

Upvotes: 0

Joe Clay
Joe Clay

Reputation: 35837

You have to register your controller as part of your module.

function DefaultCtrl($scope) {
    $scope.names = ["john", "bill", "charlie", "robert", "alban", "oscar", "marie", "celine", "brad", "drew", "rebecca", "michel", "francis", "jean", "paul", "pierre", "nicolas", "alfred", "gerard", "louis", "albert", "edouard", "benoit", "guillaume", "nicolas", "joseph"];
}

angular.module('app', [])
    .controller("DefaultCtrl", DefaultCtrl)
    .directive('autoComplete', function($timeout) {
         return function(scope, iElement, iAttrs) {
             iElement.autocomplete({
                 source: scope[iAttrs.uiItems],
                 elect: function() {
                     $timeout(function() {
                         iElement.trigger('input');
                     }, 0);
                 }
             });
         };
    });

Upvotes: 0

messerbill
messerbill

Reputation: 5639

you need to define an angular controller this way:

angular.module("app", []).controller("DefaultCtrl", function(){
  //your stuff

});

the reason is:

You can imagine, that "angular" is just an javascript object representing your application - so if you want your application to know your controller, you have to add it (just the way i posted).

Upvotes: 0

Related Questions