Geek Answers Handbook

The default child state for ui-router does not work

I am testing a UI-Router nested state, but I cannot set the default state in the parent / child script, please help.

libraries:

  • angular 1.3.15
  • ui router: 0.2.15

navigation path:

 / - home /settings - parent state/page /settings.default - child 1 /settings.mail - child 2 /settings.phone - child 3

expected behavior:

when going to /settings , the initial state / default page of the child should be launched / loaded

actual behavior:

If I set the status to "settings" abbrat: true, there will be an error:

 Error: Cannot transition to abstract state 'settings' at Object.transitionTo (angular-ui-router.js:3143) at Object.go (angular-ui-router.js:3068) at angular-ui-router.js:4181 at angular.js:16299 at completeOutstandingRequest (angular.js:4924) at angular.js:5312

If I delete 'abstrat: true', there is no error, but when I go to / settings, the state of the child state / page does not start by default, settings.html is displayed but not loaded

app.js:

 angular.module('test',['ui.router','sails.io']) //config routing .config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider,$urlRouterProvider,$locationProvider) { $urlRouterProvider.otherwise('/'); $locationProvider.html5Mode(true); $stateProvider .state('home', { url: '/', templateUrl: 'views/index.html', controller: 'IndexController' }) .state('settings', { abstract: true, url: '/settings', templateUrl: 'views/settings.html', controller: 'SettingsController' }) .state('settings.general', { url: '', templateUrl: 'views/settings/general.html', controller: 'SettingsController' }) .state('settings.mail', { url: '/mail', templateUrl: 'views/settings/mail.html', controller: 'SettingsController' }) .state('settings.phone', { url: '/phone', templateUrl: 'views/settings/phone.html', controller: 'SettingsController' }); }]);

view /settings.html

 <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="list-group"> <li class="list-group-item"><a ui-sref=".general">General</a></li> <li class="list-group-item"><a ui-sref=".phone">Phone</a></li> <li class="list-group-item"><a ui-sref=".mail">Mail</a></li> </ul> </div> <div class="col-md-9"> <div ui-view></div> </div> </div> </div>
+5
source share
2 answers

There is a working plunker

This will work, but only using url navigation, i.e. href :

  <a href="/settings"> // will work

But this will not be - we cannot go into the abstract state:

  <a ui-sref="settings">settings</a>

But based on this Q and A:

Redirect state to standard UI router connection in AngularJS

We can remove the abstract and create a default state processing like this. There is an updated plunker

 // redirection engine app.run(['$rootScope', '$state', function($rootScope, $state) { $rootScope.$on('$stateChangeStart', function(evt, to, params) { if (to.redirectTo) { evt.preventDefault(); $state.go(to.redirectTo, params) } }); }]);

Parent stat setting:

 .state('settings', { //abstract: true, redirectTo: 'settings.general', url: '/settings', ...

Check here

+9
source

I understand that this is an older question, but I thought I would add something if it helps someone else:

Although you may not want to add a plugin to solve this problem, you should check out UI-Router-Extras

There is a feature included there called "Deept State Redirect". This allows any state to retain the last activated substance, so when you switch, then back, the same leak will be invoked (child state).

The part that will help your problem can determine the default child state. You do this by adding the "dsr" parameter and setting the "default value" regardless of the state of your child.

 function myRouterConfig ($stateProvider, $urlRouterProvider) { $stateProvider .state('parentState', { //Not in this file parent: 'index', sticky: true, //ui-router-extras deepStateRedirect option dsr: { default: 'parentState.defaultChild' }, url: '/parentState', views: { ' main@index ': { template: '<my-parentStateComponent>' } } }) .state('parentState.defaultChild', { url: '/defaultChild', views: { ' child@parentState ': { template: '<my-defaultChildComponent>' } } });

}

+1
source

More articles:


All Articles