Search code examples
javascriptjqueryangularjsangularjs-scopeangular-ui-router

angular tab selection opens new page instead of open in the same page


How to display the tab selection results in same page?

I have stacked 3 tabs in my page and the resulting html pages are loaded in new page instead of loading in the same page.

I followed the below sample and its working fine till the part its explained. https://codepen.io/jasoncluck/pen/iDcbh

I have mentioned my URL path in href attribute of anchor tag. Ex:

<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
    <li ng-class="{'active': view_tab == 'tab1'}">
        <a class="btn-lg" ng-click="changeTab('tab1')" href="/tabl">Tab1</a>
    </li>
    <li ng-class="{'active': view_tab == 'tab2'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="/tab2">Tab2</a>
    </li>
    <li ng-class="{'active': view_tab == 'tab3'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="/tab3"> Tab3 </a>
    </li>
</ul>

and below is my router part

    .when('/tabl', {
        controller : 'URLController',
        templateUrl : './views/URL.html'
    })

I can see my controller and templateURL is loaded but in the different page. If not possible with href then please share me ideas to follow.


Solution

  • <div ui-view></div> is the rescuer...

    This will render the child state inside your parent state template.