Clever Geek Handbook

Angular lazy loading in ui-bootstrap

I am using Angular Tabbed Twitter Bootstrap Nav and want to be able to enable / activate actions based on the active tab.

This fiddle shows my basic structure:

fiddle

What I want to do on the Details tab, download or process the content if the tab is activated.

Currently, loading the content of the Details tab is loading the latency / processing overhead as it is processor intensive. It's quite small, but takes a long time to add up when the entire row of tabs is displayed in the working copy. The example only shows 3 lines, but a normal page would have about 10. Since the user is unlikely to want to click the Details tab on every line, I would like the content to be activated or loaded whenever a tab was selected.

Any ideas on how to implement this?

+3


source to share


1 answer


You can use a combination of ng-if and ng-include tags for lazy load content



<div ng-if="option=='details'" ng-include="/details">
</div>
+3


source






More articles:


All Articles