Angular add modules after angular.bootstrap
according to this presentation (slide 12) you can assign controllerProvider
to app.
Example of replacing module's controller
method: http://jsfiddle.net/arzo/HB7LU/6659/
var myApp = angular.module('myApp', []);//note overriding controller method might be a little controversial :D myApp.config(function allowRegisteringControllersInRuntime($controllerProvider) { var backup = myApp.controller; myApp.controller = $controllerProvider.register; myApp.controller.legacy = backup;})myApp.run(function ($rootScope, $compile) { myApp.controller('MyCtrl', function($scope) { $scope.name = 'Superhero'; }) var elem; var scope=$rootScope; elem = $compile('<p ng-controller="MyCtrl">{{name}}</br><input ng-model="name" /></p>')($rootScope, function (clonedElement, scope) { console.log('newly created element', clonedElement[0]) document.body.appendChild(clonedElement[0]); }); console.log('You can access original register via', myApp.controller.legacy);})
The only method that I've seen that works is replacing the angular.module
function with your own function returning the module you used to bootstrap your app.
var myApp = angular.module('myApp', []); angular.module = function() { return myApp;}
So that all modules that are registered afterwards are actually being registered in your myApp
module.
This method combined with the one you describe in the question (using providers like $controllerProvider
) will allow you to add "modules" after angular.bootstrap
.
Demo
See this jsfiddle for a demo: https://jsfiddle.net/josketres/aw3L38r4/
Drawbacks
- The
config
blocks of the modules that are added afterangular.bootstrap
will not be called. Maybe there's a way to fix this, but I haven't found it. - Overriding
angular.module
feels like a "dirty hack".