Leiten Sie einen Status mit UI-Router in AngularJS auf den Standard-Unterstatus um

Ich erstelle eine Registerkarten-basierte Seite, die einige Daten anzeigt. Ich verwende UI-Router in AngularJs, um Zustände zu registrieren.

Mein Ziel ist es, beim Laden der Seite einen Standard-Tab zu öffnen. Jede Registerkarte hat Unterregisterkarten, und ich möchte, dass beim Wechseln der Registerkarten eine Standard-Unterregisterkarte geöffnet wird.

Ich habe mit getestet onEnter Funktion und innen verwende ich $state.go('mainstate.substate'); aber es scheint aufgrund von Schleifeneffektproblemen nicht zu funktionieren (auf state.go to substate ruft es seinen übergeordneten Zustand auf und so weiter, und es verwandelt sich in eine Schleife).

$stateProvider

.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})

.state('main.street', {
  url: '/street',
  templateUrl: 'submenu.html',
  params: {tabName: 'street'}
})

Hier habe ich eine erstellt Plunker-Demo.

Im Moment funktioniert alles, außer dass ich den Standard-Tab nicht geöffnet habe und genau das brauche ich.

Vielen Dank für Ihre Anregungen, Meinungen und Ideen.

Aktualisieren:
1.0 und höher Unterstützt von vornherein RedirectTo.

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

ich erschuf ein Beispiel hier.

Diese Lösung stammt von einem netten “Kommentar” zu einem Problem mit der Verwendung von Umleitungen .when() (https://stackoverflow.com/a/27131114/1679310) und wirklich coole Lösung dafür (von Chris T, aber der ursprüngliche Beitrag war von yahyaKacem)

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

Erweitern wir also zunächst main mit der Umleitungseinstellung:

$stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'main.html',
      redirectTo: 'main.street',
    })

Und fügen Sie nur diese paar Zeilen in run hinzu

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

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

Auf diese Weise können wir jeden unserer Zustände mit seiner Standardumleitung anpassen … Überprüfen Sie es Hier

BEARBEITEN: Option aus Kommentar von @Alec hinzugefügt, um den Browserverlauf beizubehalten.

In der Tat, auch wenn diese Lösung vorgeschlagen wird Radim hat genau den Job gemacht, ich musste mir die Unterregisterkarte (Status) jeder Registerkarte merken.

Also habe ich eine andere Lösung gefunden, die dasselbe tut, sich aber auch jeden Tab-Unterzustand merkt.

Ich musste nur noch installieren ui-router-extras und benutze die Deep-State-Umleitung Merkmal:

$stateProvider
  .state('main.street', {
     url: '/main/street',
     templateUrl: 'main.html',
     deepStateRedirect: { default: { state: 'main.street.cloud' } },
  });

Danke!

Ab Version 1.0 des ui-routers unterstützt es a redirectTo Eigentum. Zum Beispiel:

.state('A', {
  redirectTo: 'A.B'
})

Seit Version 1.0 von ui-router wurde ein Standard-Hook mit eingeführt IHookRegistry.onBefore() wie im Beispiel gezeigt Datengesteuerter Standard-Unterzustand in http://angular-ui.github.io/ui-router/feature-1.0/interfaces/transition.ihookregistry.html#onbefore

// state declaration
{
  name: 'home',
  template: '<div ui-view/>',
  defaultSubstate: 'home.dashboard'
}

var criteria = {
  to: function(state) {
    return state.defaultSubstate != null;
  }
}
$transitions.onBefore(criteria, function($transition$, $state) {
  return $state.target($transition$.to().defaultSubstate);
});

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("/state","/state/sub-state");

    })

Wenn jemand hierher kommt, um eine Antwort zu erhalten, wie man eine einfache Umleitung für einen Zustand implementiert, und wie es bei mir passiert ist, keine Möglichkeit hat, den neuen Router zu verwenden …

Offensichtlich ist die @bblackwo-Antwort wieder großartig, wenn Sie können:

$stateProvider.state('A', {
  redirectTo: 'B',
});

Wenn Sie es nicht können, leiten Sie es einfach manuell um:

$stateProvider.state('A', {
  controller: $state => {
    $state.go('B');
  },
});

Ich hoffe, es hilft!