Angular lazy loading in ui-bootstrap

Question

I am using Angular with Twitter Bootstrap Nav Tabs and want to be able to enable/action things based on the active tab.

This fiddle shows my basic structure:

fiddle

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

At the moment there is a delay/processing overhead when the contents of the Details tab is loaded as it is quite processor intensive. It is fairly small but adds up to quite a delay when all the row of tabs are rendered in the working copy. The example only shows 3 rows but a normal page would have about 10. Since the user is unlikely to want to click on the Details tab on every row, I would like the content activated or loaded whenever the tab is selected.

Any ideas on how to implement this?

If you use ui-bootstrap your select attribute will be an expression you can use to load the content. — Dylan
– Dylan, Commented Dec 17, 2014 at 22:41
use ng-if like <div ng-if="option=='details'" ng-include="/details"> — Aidin
– Aidin, Commented Dec 17, 2014 at 23:57
@Aidin perfect! that worked. I will accept that as the answer if you add it. — DeclanMcD
– DeclanMcD, Commented Dec 18, 2014 at 16:22

Aidin · Accepted Answer · 2014-12-18 17:48:57Z

3

You can use a combination of ng-if and ng-include tags to lazy load contents

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

answered Dec 18, 2014 at 17:48

Aidin

2,13423 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular lazy loading in ui-bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related