AngularStrap tabs load html fragment

All we need is an easy explanation of the problem, so here it is.

I am currently working on an AngularJS project with Twitter Bootstrap, and am trying to shift my Bootstrap directives into Angular. I decided on AngularStrap as it provided support for Bootstrap-Select (which I wasn’t sure was the same for AngularUI). The tabs example only covered static html though. Is there any way via AngularStrap or AngularJS to load html fragments dynamically, so that it is only called when the tab is clicked? My html fragments need to execute javascript as well.

My reason for doing so is two-fold. First is that each tab contains quite a lot of content, and I do not wish to load all the tabs at once, which will slow down the loading. The second reason is that I prefer a more modular approach to my source code and not put everything on the same html file.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You can use the ng-include directive to load html fragments.

Using the AngularStrap Tab’s example you can switch out the static content with the url to retrieve the html fragment. Here is an example based on the AngularStrap Tab example with these key changes:

1) $scope.tabs now has a page property instead of content pointing to either template1.html, template2.html, or template3.html.

    $scope.tabs = [
    {title:'Home', page: 'template1.html'},
    {title:'Profile', page: 'template2.html'},
    {title:'About', page: 'template3.html'}
  ];

2) An ng-include is added to display the currently selected tab’s page.

  <div ng-include src="tabs[tabs.activeTab].page"></div>

Note: I have the ng-include outside of the ng-repeat so each tab’s page contents won’t be loaded (even if not displayed).

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply