Menu
I can't seem to add a controller after I bootstrap AngularJS. The exception I get indicates that the passed controller function is not a function. However, in the Chrome debugger it shows as the expected function.
(I realize that I am not using the declarative style of initializing AngularJS, I am exploring the framework.)
Exception
Error: Argument 'MediaLoaderController' is not a function, got undefined
at Error (<anonymous>)
at $a (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:16:453)
at qa (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:17:56)
at $get (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:52:219)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:348
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:6:494)
at i (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:43:213)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:307)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324)
at e (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js:39:324) angular.min.js:62
(anonymous function) angular.min.js:62
$get angular.min.js:52
$get.e.$apply angular.min.js:88
(anonymous function) angular.min.js:16
d angular.min.js:27
c angular.min.js:16
rb angular.min.js:16
Bootstrapper.instance.bootstrapAngularJS bootstrapper.js:19
(anonymous function) slide_template_angularjs.jsp:20
x.Callbacks.c jquery.js:3048
x.Callbacks.p.fireWith jquery.js:3160
x.extend.ready jquery.js:433
q
HTML
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/bootstrapper.js"></script>
<script language="JavaScript">
var bootstrapper = null;
var controllerLibrary = null;
$(document).ready( function(){
bootstrapper = new Bootstrapper();
controllerLibrary = new ControllerLibrary();
bootstrapper.bootstrapAngularJS();
bootstrapper.myModule.controller( "MediaLoaderController", controllerLibrary.MediaLoaderController );
});
</script>
</head>
<body>
<div ng-controller="MediaLoaderController">
{{status}}
</div>
</body>
</html>
JavaScript
function Bootstrapper() {
var instance = new Object();
instance.myModule = null;
/*
* Bootstrap AngularJS and initialize myModule
*/
instance.bootstrapAngularJS = function() {
instance.myModule = angular.module('myModule', []);
angular.bootstrap(document, ['myModule']);
};
return instance;
}
function ControllerLibrary() {
}
ControllerLibrary.prototype.MediaLoaderController = function($scope) {
$scope.status = "loading";
};
562
You have to register the controller before bootstrap happens, otherwise AngularJS can't find the controller and throw the error. See the working plunker here. Extract below.
function Bootstrapper() {
var instance = new Object();
instance.myModule = angular.module('myModule', []);
instance.bootstrapAngularJS = function() {
angular.bootstrap(document, ['myModule']);
};
return instance;
}
$(document).ready( function(){
bootstrapper = new Bootstrapper();
controllerLibrary = new ControllerLibrary();
bootstrapper.myModule.controller( "MediaLoaderController", controllerLibrary.MediaLoaderController );
bootstrapper.bootstrapAngularJS();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
