Angular ui-router... Display default tab

Question

I am arriving on bookDetails state form some other link. Here bookDetails state's template has links for different tabs (or templates). And associated controller EditBookController has a json file using which I am building forms in different tabs with states like bookDetails.basic and bookDetails.publisher which use parent EditBookController. It's working fine. How to directly display the default bookDetails.basic instead of making user click the link? If I make bookDetails abstract(abbstract:true) and provide an empty link to bookDetails.basic I get following error Cannot transition to abstract state 'bookDetails'

    $urlRouterProvider.otherwise('/home');

    $stateProvider
    .state('home', {              
              url:'/home',
              controller: 'HomeController',
              templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
          })
    .state('books', {
              url:'/books',
              controller: 'BooksController',
              templateUrl: '/static/publisher/views/Book_Listing_Template.html'
          })          
    .state('bookDetails', {
              url : '/books/:b_id',                

              controller: 'EditBookController',                  
              templateUrl: '/static/publisher/views/Product_Page_Template.html'
          }) 

    .state('bookDetails.basic', {
              url : '/basic',                  
              templateUrl: '/static/publisher/views/tab1.html'
          }) 

    .state('bookDetails.publisher', {
              url : '/publisher',                  
              templateUrl: '/static/publisher/views/tab2.html'
          })

A plunk with similar problem. but code is different On clicking form it should land on the profile profile form.

Possible duplicate: http://stackoverflow.com/questions/17001589/how-to-direct-user-to-a-child-state-when-he-is-transitioning-to-its-parent-state — naeramarth7, Apr 11 '15 at 11:14

score 4 · Accepted Answer · edited May 23 '17 at 12:34

I created working example here

There is similar question: Redirect a state to default substate with UI-Router in AngularJS

The solution comes from a cool "comment" related to an issue with redirection using .when() (https://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

In the state definition I added ONLY one setting to bookDetails state, the: redirectTo: 'bookDetails.basic',. Let's have a look:

$urlRouterProvider.otherwise('/home');

$stateProvider
.state('home', {              
          url:'/home',
          controller: 'HomeController',
          templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
      })
.state('books', {
          url:'/books',
          controller: 'BooksController',
          templateUrl: '/static/publisher/views/Book_Listing_Template.html'
      })          
.state('bookDetails', {
          // NEW LINE
          redirectTo: 'bookDetails.basic',
          url : '/books/:b_id',
          controller: 'EditBookController',                  
          templateUrl: 'static/publisher/views/Product_Page_Template.html'
      }) 

.state('bookDetails.basic', {
          url : '/basic',                  
          templateUrl: '/static/publisher/views/tab1.html'
      }) 

.state('bookDetails.publisher', {
          url : '/publisher',                  
          templateUrl: '/static/publisher/views/tab2.html'
      })

And now - only these few lines will do the miracle:

app.run(['$rootScope', '$state', 
 function($rootScope, $state) {

  $rootScope.$on('$stateChangeStart',
    function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    }
  );
}]);

This way we can adjust any of our states with its default redirection...Check it here

There is for sure NO magic, no miracles ;) Please, check the 1) **Eventing system** of `UI-Router` here: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#events-1 and the 2) data [Attach Custom Data to State Objects](https://github.com/angular-ui/ui-router/wiki#attach-custom-data-to-state-objects). These together are here combined, whenever there is a state change (e.g. targeting the parent) we just check if such state in `data : {}` setting does not have preferred child. That's it. Really ;) Enjoy mighty UI-Router sir ;) — Radim Köhler, Apr 13 '15 at 05:52

score 0 · Answer 2 · edited May 23 '17 at 10:32

0

From Directing the user to a child state when they are transitioning to its parent state using UI-Router:

Either change the bookDetails.basic state to:

.state('bookDetails.basic', {
  url : '',                  
  templateUrl: '/static/publisher/views/tab1.html'
})

Or add the following routing:

$urlRouterProvider.when('/books/{b_id}', '/books/{b_id}/basic');

edited May 23 '17 at 10:32

Community

1
1

answered Apr 11 '15 at 11:34

naeramarth7

6,030
1
22
26

here is a similar plunk i have created... edit it http://plnkr.co/edit/?p=streamer&s=hOUZg2P7uHv7gS2n – shrinidhi kulkarni Apr 11 '15 at 11:38

score -1 · Answer 3 · answered Apr 11 '15 at 11:15

-1

Try to add $state.go('bookDetails.basic') inside EditBookController. If I understood you< this will help.

answered Apr 11 '15 at 11:15

Roma Barantsevich

27
2

This will always route to `bookDetails.basic` when the `bookDetails` controller is loaded... – naeramarth7 Apr 11 '15 at 11:31

Angular ui-router... Display default tab

3 Answers3

Linked