UI-Router를 사용하여 사용자가 부모 상태로 이행할 때 사용자를 자녀 상태로 유도

UI-Router를 사용하여 사용자가 부모 상태로 이행할 때 사용자를 자녀 상태로 유도

다음 사항을 고려하십시오.

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

만약 내가 간다면example.com/staff/1234/view, 디폴트로는manager.staffDetail.view.schedule아이 상태?

1. 먼저 속성을 에 추가합니다.'manager.staffDetail.view'상태이것은 필수는 아니지만 이 상태로 직접 이동하는 일이 없기 때문에 항상 하위 상태 중 하나로 이동합니다.

2. 다음으로 다음 중 하나를 수행합니다.

• 를 제공하다'manager.staffDetail.view.schedule'빈 URL을 기술합니다.그러면 부모 URL에 아무것도 추가되지 않으므로 부모 상태 URL과 동일한 URL이 됩니다.

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

• 또는 기본 자경로의 URL을 변경하지 않고 유지하려면 에서 리다이렉트를 설정합니다.module.config이 코드는, 다음의 임의의 장소를 리다이렉트 합니다.'/staff/{id}/view'위치까지'/staff/{id}/view/schedule':

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

디폴트 자녀 뷰를 설정하는 경우는, 다음의 예를 참조해 주세요.클릭 시Route 1로드 디폴트 상태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"];
    }
  })

같은 문제에 부딪혔을 때 다음 솔루션이 효과가 있음을 알게 되었습니다.

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

이것은 @cristopherthielen on github에서 인용한 것입니다.

"현재로서는 추상적인 상태를 선언하지 말고 다음 레시피를 사용하십시오.

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

다음으로 프로세스의 구조를 나타냅니다.

1. 사용자는 "부모" 상태로 이동합니다.
2. "$stateChangeStart" 이벤트가 발생함
3. "$state"의 수신기ChangeStart는 이벤트를 포착하여 "toState"(부모) 및 "이벤트"를 핸들러 함수에 전달합니다.
4. 핸들러 함수는 "redirectTo"가 "toState"에 설정되어 있는지 확인합니다.
5. "redirect To"가 설정되어 있지 않으면 아무 일도 일어나지 않고 사용자는 "to State" 상태로 계속됩니다.
6. "redirectTo"가 설정되어 있는 경우 이벤트는 취소되고(event.preventDefault), $state.go(toState.redirectTo)는 "redirectTo"(parent.child)로 지정된 상태로 전송합니다.
7. "$state"ChangeStart" 이벤트는 다시 시작되지만 이번에는 "toState" == "parent.child"이고 "redirectTo" 옵션이 설정되지 않았으므로 "toState"로 계속됩니다.

꽤 늦었지만 원하는 주로 "리다이렉트"할 수 있을 것 같습니다.

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

스테이트 컨피규레이션에서는 컨트롤러를 짧게 쓸 수 있습니다.

manager.staff Detail을 바꿨어요.view'를 추상 상태로 전환하고 기본 자식 상태 URL을 공백으로 둡니다.

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

angular-ui-router: 0.2.13에서 @nfiniteloop의 리다이렉트솔루션은 작동하지 않을 것 같습니다.0.2.12로 롤백하면 동작합니다($urlRouterProvider를 넣어야 할 수도 있습니다).($stateProvider 전에 콜할 때)

https://stackoverflow.com/a/26285671/1098564 를 참조해 주세요.

및 https://stackoverflow.com/a/27131114/1098564 (0.2.12로 돌아가지 않는 경우)를 참조해 주세요.

2014년 11월 28일 현재, https://github.com/angular-ui/ui-router/issues/1584는 0.2.14에서 다시 작동해야 함을 나타냅니다.

늦었지만 여기의 모든 답변은 AngularJs용 Angular-ui-router의 최신 버전에 적용되지 않습니다.그 버전(특히 @uirouter/angularjs#v1.0.x)에서는, 다음의 URL 에 액세스 할 수 있습니다.redirectTo: 'childStateName'의 두 $stateProvider.state() §:

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

다음은 관련 문서 섹션입니다.https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-hook-redirectto

이게 도움이 됐으면 좋겠네요!

다음으로 UI 라우터에서 부모 상태를 변경하는 것만으로 매우 심플하고 투과적인 대체 방법을 제시하겠습니다.

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

angular-ui-router-default를 추가하고,abstract ★★★★★★★★★★★★★★★★★」default" " " 모모에모태에 。

...

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

...

이 에 " " " 가 합니다.<ui-view/>어디선가 말이야

언급URL : https://stackoverflow.com/questions/17001589/directing-the-user-to-a-child-state-when-they-are-transitioning-to-its-parent-st