Angular + ui-router implementing tabs

Question

For the past 9 hours I have been trying to implement a page with tabs using Angular and ui-router.

I have the following:

.state('someAbstractParentRoot', {
            'abstract': true,
            url: '/{id}',
            templateUrl: '/admin/templates/rootTemplate',
            controller: 'someController1',
            data: {
                breadcrumbLabel: 'Details'
            }
        })
        .state(someAbstractParentRoot.child, {
            url: '',
            views: {
                details: {
                    templateUrl: '/admin/templates/details',
                    controller: 'someController2'
                },
                videos: {
                    templateUrl: '/admin/templates/videos',
                    controller: 'someController3'
                },
                logs: {
                    templateUrl: '/admin/templates/logs',
                    controller: 'someController4',
                },
                notes: {
                    templateUrl: '/admin/templates/notes',
                    controller: 'someController5'
                }
            }
        })

Using bootstrap I simply show the template I need.
so when the videos tab is shown, the url is something like: localhost:8080/users/1#videos. So, this all works great until I need to send this link to someone, because when I do that, the details tab is automatically opened. I can't just toggle classes on div elements because some of the tabs are using ng-if so jquery doesn't pick up all of the html it should, probably because of angulars digest cycle (it can be solved with setTimeout, but I am trying to avoid that).

Does anyone know how I can use ui-router to define a tab which will support direct linking? Some example would be very much appreciated. NB: I need the abstract parent state.

Can urls in ui-router have a '#' symbol?

Also look my implementation of tabs I made for other topic. jsfiddle.net/Serhioromano/t7s3jrg4 — Sergey Romanov
– Sergey Romanov, Commented Sep 25, 2014 at 10:06
thank you, this gave me an idea. This maybe a stupid questions, but changing the parameter in the url will trigger a page reload, won't it? — Marin
– Marin, Commented Sep 25, 2014 at 10:49
No. Angular is SPA and page is loaded only once. It will only load a partial content of the tab and only one time. And all $scope you define in paranet abstract scope will be remembered. You can enter text into inputs and then switch tabs and you can see that text is there. — Sergey Romanov
– Sergey Romanov, Commented Sep 26, 2014 at 0:14

Mathieu Bertin · Accepted Answer · 2014-09-25 12:47:39Z

1

There is a problem with your states actually you declare only one state which can be divided in several parts you have to declare a state for each subviews so declare something like. I don't know if you really need an abstract state so i can juste declare:

    $stateProvider.state('details', {
        templateUrl: '/admin/templates/details',
        controller: 'someController2'
    })
    .state('videos', {
         templateUrl: '/admin/templates/details.html',
         controller: 'someController3'
    })
    .state('logs', {
         templateUrl: '/admin/templates/logs.html',
         controller: 'someController4'
    })            
    .state('notes', {
         templateUrl: '/admin/templates/notes.html',
         controller: 'someController5'
    });

In your rootTemplate juste add this

   <div id="tabsContainer">
       <a ui-sref="details">Details</a>
       <a ui-sref="logs">Logs</a>
      ....
   </div>

   <div ui-view> </div> <!-- Where your state template will be inserted -->

answered Sep 25, 2014 at 12:47

Mathieu Bertin

1,62411 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Marin Over a year ago

Yeah, I saw that as a problem also, and one of my ideas was to split that one state with 4 views into 4 states, however, the boss wanted to be able to manually change the url without reloading the page. So, in the end I've left it the way it is, with those 'a' tags having a href to the element with some id (e.g. <a hreg="#details">) and wrapped $location.hash() into a function and used watch to detect when the hash changed and used a lot of ng-classes to determine which tab should be opened....

Mathieu Bertin Over a year ago

No state it will be available for all state it's like a main template that will never change.

Mathieu Bertin Over a year ago

@Marin for detecting the state change use $stateChangeSuccess event

Marin Over a year ago

I don't think that would meet the requirements of the way things are arranged in the project. Because, these tabs are available only on one subpage to which you navigate from the main menu, and that subpage has to have a state defined like every other one. Does that make sense?

Mathieu Bertin Over a year ago

OK so define your main state called 'main' and view a <div ui-view> and define a template that will contain your tabs and the view associated and after create the children state called 'main.XXX' so you will be able to change you sub state thanks to the tabs

|

Collectives™ on Stack Overflow

Angular + ui-router implementing tabs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related