angularjs 当用户使用UI路由器转换到父状态时,将用户定向到子状态

eagi6jfj  于 2022-10-31  发布在  Angular
关注(0)|答案(9)|浏览(123)

请考虑以下事项:

.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子状态?

yruzcnhs

yruzcnhs1#

1.首先,向**abstract:true'manager.staffDetail.view'状态添加一个属性。这不是必需的,但您希望设置此属性,因为您不会直接转到此状态,您将始终转到它的一个子状态。
1.然后执行
以下**操作之一:

  • 'manager.staffDetail.view.schedule'状态指定一个空URL。这将使它与其父状态URL匹配,因为它不会向父URL追加任何内容。
`.state('manager.staffDetail.view.schedule', {url:'', ...`
  • 如果你想保持默认子路由的URL不变,那么在你的module.config中设置一个redirect,这里的代码将把'/staff/{id}/view'的任何位置重定向到'/staff/{id}/view/schedule'的位置:
`$urlRouterProvider.when('/staff/{id}/view', '/staff/{id}/view/schedule');`
uidvcgyl

uidvcgyl2#

要设置默认子视图,请选中此example。单击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"];
    }
  })
xoefb8l8

xoefb8l83#

我遇到了同样的问题,并发现这个解决方案的工作:
https://github.com/angular-ui/ui-router/issues/948#issuecomment-75342784
这是引用自github上的@christopherthielen
现在,不要声明您得状态为抽象状态,而使用以下方法:

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.用户导航至“父代”状态
1.触发“$stateChangeStart”事件
1.“$stateChangeStart”的侦听器捕获事件并将“toState”(即“parent”)和“event”传递给处理函数
1.处理程序函数检查“toState”上是否设置了“redirectTo”。
1.如果未设置“redirectTo”,则不会发生任何事情,用户继续进入“toState”状态。
1.如果设置了“redirectTo”,则会取消该事件(event.preventDefault),并且$state.go(toState.redirectTo)会将它们发送到“redirectTo”中指定的状态(即“parent.child”)。
1.“$stateChangeStart”事件再次触发,但这一次“toState”==“parent.child”并且未设置“redirectTo”选项,因此它继续为“toState”。

z9ju0rcb

z9ju0rcb4#

很晚了,但我认为你可以“重定向”到你想要的状态。

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

您可以直接在状态配置中编写控制器。

f45qwnt8

f45qwnt85#

我将“manager.staffDetial.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'}})
zpgglvta

zpgglvta6#

在“angular-ui-router”中:“0.2.13”,我不认为@nfiniteloop的重定向解决方案将工作。它工作,一旦我已经回滚到0.2.12(可能不得不把$urlRouterProvider.when调用之前的$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中再次工作

p4rjhz4m

p4rjhz4m7#

这是最新版本的angular-ui-router for AngularJS,在 * 那个 * 版本(特别是@uirouter/angularjs#v1.0.x)中,你可以把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
希望这能帮助到一些人!

z4iuyo4d

z4iuyo4d8#

这里是通过仅修改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: '....'
  })
j0pj023g

j0pj023g9#

添加angular-ui-router-default,并将abstractdefault选项添加到父状态:
...

.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/>

相关问题