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

Would be useful to see more ... e.g. **states**. And, maybe I read your issue wrong.. but ... it DOES automatically redirect... and it is good, or not? also would expect that you should have **href="#/home2"** instead of *href="#home2"* — Radim Köhler, Jun 11 '15 at 06:22
Hope this is useful http://stackoverflow.com/questions/30130391/angularjs-show-hide-tabs-click-same-tab-hide-the-content/30130721#30130721 — vamsikrishnamannem, Jun 11 '15 at 06:22

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

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

It inserts the home-1 into parent ui-view
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, e.g. 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 (e.g. 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

I'm sorry, I think my question wasn't clear enough. I've updated my question again. What I mentioned above in
tags are tab links. I've mentioned main menu links also. Please check. — Body, Jun 11 '15 at 06:41
@Body, I guess we should have the answer.. I created working plunker, provided some more explanation and tried to give you hints where to check in doc... — Radim Köhler, Jun 11 '15 at 06:50
There was a small typo with url placement on home 2, please, check upated plunker http://plnkr.co/edit/UitAQiHcFvVfgGqhNiBn?p=preview — Radim Köhler, Jun 11 '15 at 06:57
I'm having a hard time to understand as I'm new to Angular. If you don't mind could you please implement your method on my plunker? http://plnkr.co/edit/Bf7pYsD1sy59nulwnrrF?p=preview. I had setup the plunker actually as I need. As you can see in the plunker, in about page, when clicked a tab it's redirected to home. Can you prevent that by disabling the extra hashes generated by Bootstrap tab or any other way? — Body, Jun 11 '15 at 14:43
Good you've created broken plunker. There is an example how to fix it: http://plnkr.co/edit/nFVKsl4IQkX7b7UwJTLF?p=preview - mostly I just defined the remaining states (profile, messages) — Radim Köhler, Jun 11 '15 at 15:01
Thank you very much, Now I'm getting slowly. I think I'll have to state all the hash changes from tab and collapse in $stateprovider. I'll create a child view for these tabs and collapse. Thanks again for your time. — Body, Jun 11 '15 at 15:08

Angularjs - UI Router otherwise and bootstrap tabs

1 Answers1