Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularStrap tabs load html fragment

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.

like image 674
Wei Hao Avatar asked May 28 '13 01:05

Wei Hao


1 Answers

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).

like image 159
Gloopy Avatar answered Oct 01 '22 01:10

Gloopy