javascript - Controller not a function, got undefined, while defining controllers globally -
i writing sample application using angularjs. got error mentioned below on chrome browser.
error is
error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=contactcontroller&p1=not%20a%20function%2c%20got%20undefined
which renders
argument 'contactcontroller' not function, got undefined
code
<!doctype html> <html ng-app> <head> <script src="../angular.min.js"></script> <script type="text/javascript"> function contactcontroller($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } </script> </head> <body> <h1> modules sample </h1> <div ng-controller="contactcontroller"> email:<input type="text" ng-model="newcontact"> <button ng-click="add()">add</button> <h2> contacts </h2> <ul> <li ng-repeat="contact in contacts"> {{contact}} </li> </ul> </div> </body> </html>
with angular 1.3+ can no longer use global controller declaration on global scope (without explicit registration). need register controller using module.controller
syntax.
example:-
angular.module('app', []) .controller('contactcontroller', ['$scope', function contactcontroller($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; }]);
or
function contactcontroller($scope) { $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } contactcontroller.$inject = ['$scope']; angular.module('app', []).controller('contactcontroller', contactcontroller);
it breaking change can turned off use globals using allowglobals
.
example:-
angular.module('app') .config(['$controllerprovider', function($controllerprovider) { $controllerprovider.allowglobals(); }]);
here comment angular source:-
- check if controller given name registered via
$controllerprovider
- check if evaluating string on current scope returns constructor
- if $controllerprovider#allowglobals, check
window[constructor]
on globalwindow
object (not recommended)
..... expression = controllers.hasownproperty(constructor) ? controllers[constructor] : getter(locals.$scope, constructor, true) || (globals ? getter($window, constructor, true) : undefined);
some additional checks:-
do make sure put appname in
ng-app
directive on angular root element (eg:-html
) well. example:- ng-app="myapp"if fine , still getting issue remember make sure have right file included in scripts.
you have not defined same module twice in different places results in entities defined on same module cleared out, example
angular.module('app',[]).controller(..
, again in placeangular.module('app',[]).service(..
(with both scripts included of course) can cause registered controller on moduleapp
cleared out second recreation of module.
Comments
Post a Comment