Weiterleiten des Benutzers in einen untergeordneten Status, wenn er mithilfe des UI-Routers in den übergeordneten Status wechselt

Folgendes berücksichtigen:

.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',  templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}})
    .state('manager.staffDetail.view.schedule', {url:'/schedule', 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'}})

domain.com/staff/1234/viewWie gehe ich standardmäßig zum manager.staffDetail.view.scheduleuntergeordneten Status, wenn ich zu gehe ?

1. Fügen Sie zunächst eine Eigenschaft zum 'manager.staffDetail.view'Status von hinzu abstract:true. Dies ist nicht erforderlich, aber Sie möchten dies festlegen, da Sie niemals direkt in diesen Status wechseln würden, sondern immer in einen der untergeordneten Status.

2. Führen Sie dann einen der folgenden Schritte aus:

   • Geben Sie dem 'manager.staffDetail.view.schedule'Status eine leere URL . Dadurch stimmt es mit derselben URL überein wie die URL des übergeordneten Status, da nichts an die übergeordnete URL angehängt wird.

     .state('manager.staffDetail.view.schedule', {url:'', ...

   • Wenn Sie die URL der untergeordneten Standardroute unverändert lassen möchten, richten Sie in Ihrer module.config eine Umleitung ein. Dieser Code hier leitet jeden Ort von '/staff/{id}/view'an den Ort von '/staff/{id}/view/schedule':

     $urlRouterProvider.when('/staff/{id}/view', '/staff/{id}/view/schedule');

Überprüfen Sie dieses Beispiel , um die untergeordnete Standardansicht festzulegen . Beim Klicken auf Route 1Standardzustand ladenroute1.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 dasselbe Problem gestoßen und habe festgestellt, dass diese Lösung funktioniert:

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

Dies wird aus @christopherthielen auf Github zitiert

"Deklarieren Sie Ihren Zustand vorerst nicht als abstrakt 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 Aufschlüsselung der Funktionsweise des Prozesses:

1. Der Benutzer navigiert zum Status "Eltern".
2. Das Ereignis "$ stateChangeStart" wird ausgelöst
3. Der Listener für "$ stateChangeStart" fängt das Ereignis ab und übergibt "toState" (das ist "parent") und "event" an die Handlerfunktion
4. Die Handlerfunktion prüft, ob "redirectTo" auf "toState" gesetzt ist.
5. Wenn "redirectTo" NICHT gesetzt ist, passiert nichts und der Benutzer fährt mit dem Status "toState" fort.
6. Wenn "redirectTo" festgelegt ist, wird das Ereignis abgebrochen (event.preventDefault) und $ state.go (toState.redirectTo) sendet sie an den in "redirectTo" angegebenen Status ("parent.child").
7. Das Ereignis "$ stateChangeStart" wird erneut ausgelöst, diesmal jedoch "toState" == "parent.child" und die Option "redirectTo" sind nicht festgelegt, sodass "toState" fortgesetzt wird.

Ziemlich spät, aber ich denke, Sie können in den gewünschten Zustand "umleiten".

.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 direkt in die Statuskonfiguration schreiben.

Ich habe 'manager.staffDetial.view' in einen abstrakten Status geändert und die URL meines untergeordneten Standardstatus 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 "Angular-UI-Router": "0.2.13" glaube ich nicht, dass die Umleitungslösung von @ nfiniteloop funktioniert. Es hat funktioniert, nachdem ich auf 0.2.12 zurückgesetzt hatte (und möglicherweise den $ urlRouterProvider.when Aufruf vor dem $ stateProvider setzen 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)

Ab 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 hier gelten nicht für die neueste Version von Angular-UI-Router für AngularJS. Ab dieser Version (speziell @ uirouter / anglejs # v1.0.x können Sie einfach redirectTo: 'childStateName'den zweiten Parameter von eingeben $stateProvider.state(). Zum 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!

Hier ist eine sehr einfache und transparente Alternative, indem Sie einfach 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: '....'
  })

Fügen Sie Angular-UI-Router-Standard hinzu und fügen Sie das abstractund hinzudefault Optionen an den übergeordneten Zustand:

...

.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 <ui-view/>irgendwo enthalten sein.