Den Benutzer in einen untergeordneten Status umleiten, wenn er mit UI-Router in den übergeordneten Status wechselt

Um die standardmäßige untergeordnete Ansicht festzulegen, aktivieren Sie dieses Beispiel . Durch Klicken auf Route 1 Standardzustand laden route1.list

// For any unmatched url, send to /route1
$stateProvider
  .state('route1', {
      url: "/route1",
      abstract:true ,
      templateUrl: "route1.html"
  })
  .state('route1.list', {
      url: '',
      templateUrl: "route1.list.html",
      controller: function($scope){
        $scope.items = ["A", "List", "Of", "Items"];
      }
  })
  .state('route1.desc', {
      url: "/desc",
      templateUrl: "route1.desc.html",
      controller: function($scope){
        $scope.items = [];
      }
  })
  .state('route2', {
    url: "/route2",
    templateUrl: "route2.html"
  })
  .state('route2.list', {
    url: "/list",
    templateUrl: "route2.list.html",
    controller: function($scope){
      $scope.things = ["A", "Set", "Of", "Things"];
    }
  })

Ich bin auf das gleiche Problem gestoßen und habe festgestellt, dass diese Lösung funktioniert:

https://github.com/angular-ui/ui-router/issues/948#issuecomment-75342784

Dies wird von @christopherthielen auf github zitiert

"Deklarieren Sie Ihren Statuszusammenfassung nicht und verwenden Sie dieses Rezept:"

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

  $stateProvider.state('parent' , {
      url: "/parent",
      templateUrl: "parent.html",
      redirectTo: 'parent.child'
  });

  $stateProvider.state('parent.child' , {
      url: "/child",
      templateUrl: "child.html"
  });

Hier ist eine Übersicht über die Funktionsweise des Prozesses:

1. Benutzer navigiert zum Status "Eltern"
2. Das Ereignis "$ stateChangeStart" wird ausgelöst
3. Listener für "$ stateChangeStart" fängt ein Ereignis und übergibt "toState" (was "parent" ist) und "event" an die Handler-Funktion
4. Die Handler-Funktion prüft, ob "redirectTo" auf "toState" gesetzt ist.
5. Wenn "redirectTo" IS NICHT gesetzt ist, geschieht nichts und der Benutzer wechselt in den Status "toState".
6. Wenn "redirectTo" IS gesetzt ist, wird das Ereignis abgebrochen (event.preventDefault) und $ state.go (toState.redirectTo) sendet sie in den in "redirectTo" angegebenen Zustand ("parent.child").
7. Das "$ stateChangeStart" -Ereignis wird erneut ausgelöst, aber "toState" == "parent.child" und die Option "redirectTo" sind nicht gesetzt, sodass es weiterhin "toState" ist.

Ganz spät, aber ich denke, Sie können in den Zustand "umleiten", den Sie möchten. 

.state('manager.staffDetail.view', {
    url:'/view',
    templateUrl: 'views/staff.details.html',
    controller: 'YourController'
})

app.controller('YourController', ['$state',
function($state) {
    $state.go('manager.staffDetail.view.schedule');
}]);

Sie können Ihren Controller kurz in den Status config schreiben.

Ich habe "manager.staffDetial.view" in einen abstrakten Status geändert und die URL meines Standard-Child-Status leer gelassen "".

// Staff
.state('manager.staffList',    {url:'^/staff?alpha',      templateUrl: 'views/staff.list.html', data:{activeMenu: 'staff'}, controller: 'staffListCtrl'})
.state('manager.staffDetail',   {url:'^/staff/{id}', templateUrl: 'views/staff.html', data:{activeMenu: 'staff'}, controller: 'staffDetailsCtrl'})
.state('manager.staffDetail.view',   {url:'/view', abstract: true, templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.schedule', {url:'', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.history', {url:'/history', templateUrl:'views/staff.view.history.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.log', {url:'/log', templateUrl:'views/staff.view.log.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.files', {url:'/files', templateUrl:'views/staff.view.files.html', data:{activeMenu: 'staff'}})
.state('manager.staffDetail.edit',   {url:'/edit',  templateUrl: 'views/staff.edit.html', data:{activeMenu: 'staff'}})

In "angle-ui-router": "0.2.13" glaube ich nicht, dass die Weiterleitungslösung von @nfiniteloop funktionieren wird. Es funktionierte, nachdem ich auf 0.2.12 zurückgerollt war (und möglicherweise den Aufruf $ urlRouterProvider.when vor dem $ stateProvider platziert haben musste.)

siehe https://stackoverflow.com/a/26285671/1098564

und https://stackoverflow.com/a/27131114/1098564 für eine Problemumgehung (wenn Sie nicht zu 0.2.12 zurückkehren möchten)

seit dem 28. November 2014 gibt https://github.com/angular-ui/ui-router/issues/1584 an, dass es in 0.2.14 wieder funktionieren sollte

Dies ist spät, aber alle Antworten gelten nicht für die neueste Version des Angular-Ui-Routers für AngularJS. Ab Version that (speziell @ uirouter/anglejs # v1.0.x können Sie einfach redirectTo: 'childStateName' in den zweiten Parameter von $stateProvider.state() setzen. Beispiel:

$stateProvider
.state('parent', {
  resolve: {...},
  redirectTo: 'parent.defaultChild'
})
.state('parent.defaultChild', {...})

Hier ist der relevante Dokumentabschnitt: https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-hook-redirectto

Hoffentlich hilft das jemandem!

Fügen Sie angle-ui-router-default hinzu und fügen Sie die Optionen abstract und default zum übergeordneten Status hinzu:

...

.state('manager.staffDetail.view', {abstract: true, default: '.schedule', url:'/view',  templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}})
  .state('manager.staffDetail.view.schedule', {url:'/schedule', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}})

...

Hinweis: Damit dies funktioniert, muss die übergeordnete Vorlage irgendwo <ui-view/> enthalten sein.

hier ist eine sehr einfache und transparente Alternative, indem Sie den übergeordneten Status im ui-Router ändern: 

  .state('parent_state', {
    url: '/something/:param1/:param2',
    templateUrl: 'partials/something/parent_view.html',  // <- important
    controller: function($state, $stateParams){
      var params = angular.copy($state.params);
      if (params['param3'] === undefined) {
        params['param3'] = 'default_param3';
      }
      $state.go('parent_state.child', params) 
    }
  })

  .state('parent_state.child', {
    url: '/something/:param1/:param2/:param3',
    templateUrl: '....',  
    controller: '....'
  })