AngularStrap tabs load html fragment

Question

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.

Lomalomas

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

Huddle

This answer gave me what I needed to make an example using inline tab content. plnkr.co/edit/gS0i0V?p=preview – Unlicensed

@Huddle - the example does not seem to work now: then page content does not change the you hit a tab button. Do you know if this technique still works? – Ainslie

The following seems to work now: <div ng-repeat="tab in tabs" title="{{ tab.title }}" name="{{ tab.title }}" ng-include src="tab.page" bs-pane> – Ainslie

@Gloopy, can u help me to have a look at this question: #34203564 – Reiners