Clever Geek Handbook

How do I use angular.bootstrap twice?

I have a page where there are multiple tabs and I am using angular + bootstrap. I am using angular.bootstrap first. Then I have another controller to display different sets of data in one of the tabs. when i try to use angular.bootstrap again i get an error it cannot load twice. To keep it simple, consider the following code.

    <div id="mainpage" ng-controller="mainPageController">
    <ul>

    <li id="test1"> <a href="gototest1"> GoToTest1  </li>
    <li id="test2"> <a href="gototest2"> GoToTest2 </li>

    </ul>
    </div>


<div id="gototest1"> 
this is some sample. I have another html page here which will be loaded as a tab
</div

The page for gototest1 looks like this:

    <div ng-controller="gototestcontroller>
    Here comes the another widget from another controller and 
I try to use angular.boostrap here again. And I get the error because it is already bootstrapped in mainPage

    </div>

What's the best way to use angular.bootstrap here?

+3


source to share


2 answers


Angular bootstrap is used to manually initialize an Angular document or element. https://docs.angularjs.org/guide/bootstrap



Angular cannot be initialized more than once on an element. Is there any reason why you are not using auto initialization using ng-app

?

0


source


It looks like you could use a module ngRoute

and use attirbute ng-view

instead of trying to load twice.



https://docs.angularjs.org/api/ngRoute

0


source






More articles:


All Articles