CODEWITHSUNDEEP
angularjsangular-ui-routerangular-routing
EddyG
EddyG

Reputation: 2119

angularjs ui-router: How to make a transition from state "parent" to "parent.firstchild"?

Parent state: 

var roundsState = {
  name : 'rounds', 
  url: '/rounds',
  component: 'rounds',
  resolve : {
    rounds : function(RoundsService){
      return RoundsService.getRounds();
    }
  }
};

Child state: 

var roundState = {
  name : 'rounds.round', 
  url: '/{roundUri}',
  component: 'round',
  resolve: {
    round: function(RoundsService, $transition$, $stateParams) {
      return RoundsService.getRound($transition$.params().roundUri);
    }
  }
};

Trying to use:

app.run(function($transitions) {
  $transitions.onSuccess({ to: 'rounds' }, function(trans) {
    return trans.router.stateService.go('rounds.round');
  });   
});

When a transition to state "rounds" is successful, I want to go for state "rounds.round" but to the first child. I was reading about grandchild but I didn't understand it.

Note that I'm using ui-router 1.x

Here is the implemented example on plnkr: http://plnkr.co/edit/0C4aSB3a3fllYxa022Aq?p=preview

Upvotes: 0

Views: 1081

Answers (3)

tanmay
tanmay

Reputation: 7911

You are missing the roundUri parameter for rounds.round state. You could have known that had you seen the console! :)

So, I changed it to something like this:

trans.router.stateService.go('rounds.round', {roundUri: "firstround"});

And it works!

Working plunker

EDIT:

How to go to a child state dynamically? (in ui-router v1.0)

Well, you can decide that inside $transitions.onSuccess. You can inject certain dependencies and decide where to go. Like this:

app.run(function($transitions, RoundsService) {
  $transitions.onSuccess({ to: 'rounds' }, function(trans) {
    RoundsService.getRounds().then(function(rounds) {
        return trans.router.stateService.go('rounds.round', {roundUri: rounds[0].uri});
    })
  });
});

Notice how I determine which child URI to visit using the service call RoundsService.getRounds().

I have modified the rounds.json so that some other state (say roundof16) is first now. And, it goes to that state! :)

Updated plunker for Dynamic child state visit.

Upvotes: 2

Vineet Agrawal
Vineet Agrawal

Reputation: 156

You can write state.js like:

angular.module('sampleApp')
    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise(function ($injector) {
            var $state = $injector.get('$state');
            $state.go('home');
        });

        $stateProvider

            .state('parent', {
                abstract: true,
                templateUrl: 'views/parent/index.html'
            })

            .state('child', {
                parent: 'parent',
                abstract: true,
                url: '/child',
                template: '<ui-view/>'
            })

            .state('child.add', {
                url: '/add',
                templateUrl: 'views/child/add.html'
            });
}]);

and then access in HTML like:

<a href="#" ui-sref="child.add"><span>Add Child</span></a>

Upvotes: 0

rrd
rrd

Reputation: 5957

Well I use this with $state and there it's fairly straightforward:

$state.go('rounds.round', {});

I don't think you should really be using $transition$ as you don't really need to.

Upvotes: 0

Related Questions