CODEWITHSUNDEEP
angularjsangular-bootstrap
TruthSeeker
TruthSeeker

Reputation: 128

Why angular.bootstrap() to document throws error

I have my test example in this plunkr link

My question is NOT DUPLICATE of this one

Also the Google Result and Github Bug was about the bug reporter not defining the module which he was trying to bootstrap in the first place

I have 3 modules grandParentModule, parentModule and nestedModule.

I have bootstrapped parentModule and nestedModule to 2 nested div elements and they are working fine.

But as soon as I try to bootstrap grandParentModule to document, it is throwing a console error.

This is my HTML

<div id="parent" ng-app="parentModule">
  <div id="nested">
  </div>
</div>

And this is my SCRIPT

angular.module('grandParentModule', []);
angular.module('parentModule', []);
angular.module('nestedModule', []);

var nestedElem = document.getElementById("nested");

angular.bootstrap(angular.element(nestedElem), ['nestedModule']);

//comment / uncomment this line to toggle the error at console
angular.bootstrap(document, ['grandParentModule']);

Only this line angular.bootstrap(document, ['grandParentModule']); is causing the error

Uncaught Error: [ng:btstrpd] http://errors.angularjs.org/1.5.5/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22parent%22%20ng-app%3D%22parentModule%22%26gt%3B

Can anyone explain to me why is it happening?

Upvotes: 2

Views: 383

Answers (1)

Walfrat
Walfrat

Reputation: 5353

This isn't how works angular bootstrapping.

You're supposed,to bootstrap only one module.

If you use multiple independant module, the DOM element where you bootstrap them must not be nested.

Furthermore what are those module supposed to be ?

If they're linked then they must have dependencies between them ie : 

angular.module('parentModule', ['grandParentModule']);

If you want to have some nested views with their own controller use either multiple ng-controller or check ui-router on the net.

Upvotes: 2

Related Questions