angular ui bootstrap - Trouble with active tab default using AngularJS, UI Boostrap, and UI Router -
angular ui bootstrap - Trouble with active tab default using AngularJS, UI Boostrap, and UI Router -
when using ui boostrap tabset along nested sticky states created ui-router , ui-router-extras, have issue navigating tab's state via url select first tab along right tab. should activate tab state matches url route.
here's tabset looks like:
<div style="position:relative"> <tabset> <tab heading="dashboard" ui-sref="lms.dashboard" ui-sref-active="active"></tab> <tab heading="modules" ui-sref="lms.modules" ui-sref-active="active"></tab> <tab heading="messages" ui-sref="lms.messages" ui-sref-active="active"></tab> <tab heading="settings" ui-sref="lms.settings" ui-sref-active="active"></tab> </tabset> <div ui-view="dashboard" class="tab-content" ng-show="$state.includes('lms.dashboard')"> <h2>dashboard</h2> {{test}} </div> <div ui-view="modules" class="tab-content" ng-show="$state.includes('lms.modules')"> <h2>modules</h2> </div> <div ui-view="messages" class="tab-content" ng-show="$state.includes('lms.messages')"> <h2>messages</h2> </div> <div ui-view="settings" class="tab-content" ng-show="$state.includes('lms.settings')"> <h2>settings</h2> </div> </div>
i have plunker here:
http://plnkr.co/edit/sqb58ykntdwniupadlmt?p=preview
to see issue, select tab other 'dashboard', reload "live view" frame.
another way open in window, switch tab, reload.
i have same issue. add together active="false" disable default behavior , utilize ui-sref-active add together active class.
<tab ui-sref-active="active" active="false">
edit
while method seems works, produces error because false not assignable.
edit 2
combining ng-init local scope variable seems trick.
<tab ui-sref-active="active" active="isactive" ng-init="isactive=false">
in case, might simpler add together active variable each tab. see plunker: http://plnkr.co/edit/73lm068buzf851h47fvq?p=preview
angularjs angular-ui-bootstrap angular-ui-router
Comments
Post a Comment