it-swarm.com.de

Den Benutzer in einen untergeordneten Status umleiten, wenn er mit UI-Router 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'}})

Wie gehe ich standardmäßig mit dem untergeordneten Status domain.com/staff/1234/view vor, wenn ich zu manager.staffDetail.view.schedule gehe?

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

  2. Führen Sie dann eins der folgenden Aktionen aus:

    • Geben Sie als _'manager.staffDetail.view.schedule'_ ein leere URL an. Dadurch stimmt die URL mit der URL des übergeordneten Status überein, da an die übergeordnete URL nichts angehängt wird.

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

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

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

136
Tim Kindberg

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"];
    }
  })
20
rab

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.
8
Chuck D

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.

7
nvcnvn

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'}})
3
Meeker

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

1
sdoxsee

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!

1
AndyPerlitch

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.

0
Jonathon Hill

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: '....'
  })
0
okigan