angularjs - uirouter - el estado hijo predeterminado ui-router no funciona

ui router angularjs tutorial

Question

Estoy probando el estado anidado de UI-Router , pero no puedo establecer el estado predeterminado en el escenario principal / secundario, por favor ayuda.

bibliotecas:

• angular 1.3.15
• enrutador ui: 0.2.15

ruta de navegación:

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

comportamiento esperado:

cuando navegue a /settings , el estado / página hijo ''general'' predeterminado debería activarse / cargarse

comportamiento real:

Si configuro ''settings'' state ''abstrat: true'', habrá un 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

Si elimino ''abstrat: true'', no hay ningún error, pero cuando navego a / settings, estado / página hijo predeterminado - estado general no activado, settings.html visualizado pero no cargado

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''
    });
}]);

views / 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>

Answer 1

Hay un plunker de trabajo

Esto funcionaría, pero solo con la navegación url , es decir, href :

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

Pero esto no será así. No podemos pasar al estado abstract :

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

Pero basado en este Q & A:

Redirigir un estado al subestado predeterminado con UI-Router en AngularJS

Podemos eliminar el resumen y crear un manejo de estado predeterminado como este. Hay plunker actualizado

// 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)
      }
    });
}]);

El ajuste de estadísticas principal:

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

Verifíquelo aquí

Answer 2

Me doy cuenta de que esta es una pregunta más antigua, pero pensé que agregaría algo en caso de que ayude a otra persona:

Aunque es posible que no desee agregar un complemento para resolver este problema, consulte UI-Router-Extras.

Hay una característica incluida allí llamada "Deept State Redirect". Esto permite que cualquier estado guarde el subestado activado más recientemente de modo que cuando haga la transición hacia fuera, luego hacia atrás, el mismo subestado (estado hijo) estará activo.

La parte que ayudaría a su problema es poder definir un estado secundario predeterminado. Para ello, agregue el parámetro "dsr" y establezca el "valor predeterminado" en cualquier estado secundario.

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>''
            }
        }
    });

}