javascript - Angularjs: Load tabs based on active tabs but prevent rendering on visited tabs -
i have page having 8 tabs , each tab has lot of html controllers(data bindings).so data rendering becomes slow.
used ng-if condition based on active tab found using ng-click on tab. active tab made visisble using css class. after using ng-if condition default tab gets loaded fast , on subsequent click on tab each tab gets loaded.but if again click on tab loaded again reloaded due ng-if condition. if dont use ng-if condition based on active tabs intial load of page slow navigating between tabs faster due entire tabs loaded @ begining.but method not efficient page load slow @ begining. want load tabs based on active tabs shown below.but dont want reload or render tab again tabs loaded once. how can done?
<div class="claimant-data-nav " ng-controller="mycontroller"> <ul class="nav nav-tabs "> <li ng-repeat="tabname in mylist | unique:'tabname'" ng-class="{'active':tabname.tabname == 'tab1'}"> <a data-target="#tab-{{tabname.tabname}}" data-toggle="tab" ng-click="activetab(tabname.tabname)">{{tabname.tabname}}</a> </li> </ul> <div class="tab-content"> <a data-toggle="tab" class="mobile-tabs" data-target="#tab-{{tabname1.tabname}}" href="javascript:void(0)" ng-repeat="tabname1 in mylist | unique:'tabname'">{{tabname1.tabname}}</a> <div id="tab-{{tabname2.tabname}}" ng-class="{'tab-pane fade active in':tabname2.tabname == 'tab1','tab-pane fade':tabname2.tabname != 'tab1'}" ng-repeat="tabname2 in mylist | unique:'tabname'"> <div ng-if="activetab == tabname2.tabname"> <!-- data binding logic here.it has lot of angularjs databindings.--> </div> </div> </div> </div>
are loading data ajax call or there static templates being loaded. in either case, need maintain scope map, retains state of tabs loaded/clicked. update ng-if condition execute function returns true or false. function can first check active tab , check if loaded initially.
if tab data loaded show/hide game, else show bindings , controller functions.