AngularJS'de UI-Router ile bir durumu varsayılan alt istasyona yönlendirin

Bazı verileri gösteren sekme tabanlı bir sayfa oluşturuyorum. Durumları kaydetmek için AngularJs'de UI-Router kullanıyorum.

Amacım, sayfa yüklenirken açık bir varsayılan sekmeye sahip olmak. Her sekmenin alt sekmeleri vardır ve sekmeleri değiştirirken varsayılan bir alt sekmenin açık olmasını istiyorum.

İşlevle test ediyordum onEnterve kullanıyorum, $state.go('mainstate.substate');ancak döngü etkisi sorunları nedeniyle çalışmıyor gibi görünüyor (state.go üzerinde, onun ana durumunu çağırdığını ve böyle devam ettiğini ve bir döngüye dönüştüğünü).

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

Burada bir plunker demosu oluşturdum .

Şimdilik her şey çalışıyor, ancak varsayılan sekmem açık değil ve tam da ihtiyacım olan şey bu.

Önerileriniz, görüşleriniz ve fikirleriniz için teşekkür ederiz.

Güncelleme: 1.0 Sonrası Kutudan çıkar çıkmaz yeniden yönlendirmeyi destekler.

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

Burada bir örnek oluşturdum .

Bu çözüm, .when() ( https://stackoverflow.com/a/27131114/1679310 ) kullanarak yeniden yönlendirmeyle ilgili bir soruna güzel bir "Yorumdan" geliyor ve bunun için gerçekten harika bir çözüm (Chris T tarafından, ancak orijinal gönderi yahyaKacem tarafından yapıldı)

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

Öyleyse öncelikle yönlendirme ayarı ile main'i genişletelim:

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

Ve sadece bu birkaç satırı çalıştırın

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

Bu şekilde, herhangi bir durumumuzu varsayılan yeniden yönlendirmesiyle ayarlayabiliriz ... Buradan kontrol edin

DÜZENLEME: Tarayıcı geçmişini korumak için @Alec'in yorumundan seçenek eklendi.

Aslında Radim'in önerdiği bu çözüm tam olarak işi yapsa bile her sekmenin alt sekmesini (durumunu) hatırlamam gerekiyordu.

Bu yüzden aynı şeyi yapan ama aynı zamanda her sekme alt metnini hatırlayan başka bir çözüm buldum.

Tek yapmam gereken ui yönlendirici ekstralarını yüklemek ve derin durum yeniden yönlendirme özelliğini kullanmaktı:

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

Teşekkür ederim!

UI yönlendiricinin 1.0 sürümünden itibaren bir redirectToözelliği destekler . Örneğin:

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

Ui -router'ın 1.0 sürümünden bu yana , http://angular-ui.github.io/ui-router/feature-1.0/ adresindeki Veriye Dayalı Varsayılan Substate örneğinde gösterildiği gibi IHookRegistry.onBefore () kullanılarak varsayılan bir kanca tanıtıldı. 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");

    })

Birisi bir durum için basit bir yönlendirmenin nasıl uygulanacağına dair bir cevap için buraya gelirse ve benim de başıma geldiği gibi, yeni yönlendiriciyi kullanma fırsatı bulamazsa ...

Açıkçası, eğer yapabiliyorsanız, @bblackwo'nun yanıtı harika:

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

Yapamazsanız, yalnızca manuel olarak yeniden yönlendirin:

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

Umut ediyorum bu yardım eder!