Angularjs - UI Router otherwise and bootstrap tabs

Question

When I'm using Bootstrap tabs, links are automatically redirected to home page as stated in otherwise option. I think it's because of the hash tags in href in tabs.

Tabs

<ul class="tab-nav" role="tablist" data-tab-color="red" tabindex="7" style="overflow: hidden; outline: none;">
       <li class=""><a href="#home2" role="tab" data-toggle="tab" aria-expanded="false">Home</a></li>
       <li role="presentation" class=""><a href="#profile2" role="tab" data-toggle="tab" aria-expanded="false">Profile</a></li>
</ul>

JS

$urlRouterProvider.otherwise("/home");
    $stateProvider
        .state ('home', {
            url: '/home',
            templateUrl: 'views/common.html'
        })

        .state ('home.home-1', {
            url: '/home-1',
            templateUrl: 'views/home.html'
        })

        .state ('home.home-2', {
            url: '/home-2',
            templateUrl: 'views/home.html'
        })

Main Menu links

<a data-ui-sref-active="active" data-ui-sref="home.home-1">Home 1</a>
<a data-ui-sref-active="active" data-ui-sref="home.home-2">Home 2</a>

I'm using pure Bootstrap NOT angular bootstrap module. How can I fix this by preventing extra hash tags? I mean how to prevent redirection when URL changes which are not stated in $stateProvider

Answer 1

There is a working plunker

I would say, that we are missing target for children in our parent view

<div ui-view=""></div>

This is a must if we use simplified views notation (without views : {} object). This state definition, is doing two things

1. It inserts the home-1 into parent ui-view
2. It inserts the home-2 into root ui-view, skipping the parent

check updated states:

  .state ('home', {
        url: '/home',
        templateUrl: 'views/common.html'
    })
    .state ('home.home-1', {
        url: '/home-1',
        templateUrl: 'views/home.html'
    })
    .state ('home.home-2', {
      url: '/home-2',
      views: {
        '@' : {
          templateUrl: 'views/home.html'
        }
      }
    })

and parent views/common.html now contains:

<div ui-view>

More details from doc:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename , where viewname is the name used in the view directive and state name is the state's absolute name, eg contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

Check it here

Original part

I would say, that the issue is hidden in this link setting:

<a href="#home2"...

Because our states are defined:

  .state ('home', {
        url: '/home',
        ...
    })
    .state ('home.home-1', {
        url: '/home-1',
        ...
    })
    .state ('home.home-2', {
        url: '/home-2',
        ...
    })

And we do not use HTML5 mode, the links must look like this

<a href="#/home"...
<a href="#/home/home-1"...
<a href="#/home/home-2"...

So:

any other link (eg the original <a href="#home2" ) is in fact unknown for UI-Router . And that's why it is redirect to otherwise setting

Also, any child does inherit url from its parent, the state 'home.home-1' url is built from parent /home and its own /home-1 === /home/home-1