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

Ich erstelle eine tabulatorbasierte Seite, auf der einige Daten angezeigt werden. Ich verwende UI-Router in AngularJs, um Zustände zu registrieren.

Mein Ziel ist es, beim Laden der Seite eine Standardregisterkarte zu öffnen. Jede Registerkarte hat Unterregisterkarten, und ich möchte, dass beim Ändern der Registerkarten eine Standardunterregisterkarte geöffnet wird.

Ich habe mit der onEnterFunktion getestet und im Inneren verwende ich sie, $state.go('mainstate.substate');aber sie scheint aufgrund von Problemen mit dem Schleifeneffekt nicht zu funktionieren (auf state.go ruft sie den übergeordneten Status auf und so weiter, und sie wird zu einer 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 Plunker-Demo erstellt .

Im Moment funktioniert alles, außer dass ich nicht die Standardregisterkarte geöffnet habe und genau das brauche ich.

Vielen Dank für Ihre Vorschläge, Meinungen und Ideen.

Update: Ab 1.0 Unterstützt redirectTo out of the box.

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

Ich habe hier ein Beispiel erstellt .

Diese Lösung kommt von einem netten "Kommentar" zu einem Problem mit der Umleitung unter Verwendung von .when() ( https://stackoverflow.com/a/27131114/1679310 ) und einer wirklich coolen 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 wenigen Zeilen 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.

Selbst wenn diese von Radim vorgeschlagene Lösung genau den Job erledigte, musste ich mich an die Unterregisterkarte (Status) jeder Registerkarte erinnern.

Also habe ich eine andere Lösung gefunden, die das Gleiche tut, sich aber auch an jeden Tab-Unterzustand erinnert.

Ich musste nur UI-Router-Extras installieren und die Deep State Redirect- Funktion verwenden:

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

Danke dir!

Ab Version 1.0 des UI-Routers wird eine redirectToEigenschaft unterstützt . Beispielsweise:

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

Seit Version 1.0 von ui-router wurde mit IHookRegistry.onBefore () ein Standard-Hook eingeführt, wie im Beispiel Data Driven Default Substate unter http://angular-ui.github.io/ui-router/feature-1.0/ gezeigt. 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 eine einfache Umleitung für einen Status implementiert werden kann, und wie mir passiert ist, hat er nicht die Möglichkeit, den neuen Router zu verwenden ...

Wenn Sie können, ist die Antwort von @bblackwo natürlich großartig:

$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!