77

考虑以下：

.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/view，我如何默认为manager.staffDetail.view.schedule子状态？

4

9 回答 9

136

  1. 首先，向 的'manager.staffDetail.view'状态添加一个属性abstract:true。这不是必需的，但您想设置它，因为您永远不会直接进入此状态，您总是会进入其中一个子状态。

  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');

于 2013-06-08T22:49:41.283 回答
20

要设置默认子视图，请查看此示例。单击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"];
    }
  })
于 2014-09-19T20:39:10.223 回答
9

我遇到了同样的问题，发现这个解决方案有效：

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. 用户导航到“父”状态</li>
  2. “$stateChangeStart”事件被触发
  3. “$stateChangeStart”的监听器捕获事件并将“toState”（即“父”）和“事件”传递给处理函数
  4. 处理函数检查是否在“toState”上设置了“redirectTo”。
  5. 如果未设置“redirectTo”，则不会发生任何事情，用户继续进入“toState”状态。
  6. 如果设置了“redirectTo”，则事件被取消（event.preventDefault）并且 $state.go(toState.redirectTo) 将它们发送到“redirectTo”中指定的状态（即“parent.child”）。
  7. “$stateChangeStart”事件再次被触发，但这次“toState”==“parent.child”并且“redirectTo”选项没有设置，所以它继续“toState”。
于 2015-07-03T13:52:34.067 回答
7

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

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

简而言之，您可以直接在状态配置中编写控制器。

于 2014-03-17T10:12:03.827 回答
3

我将“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'}})
于 2013-06-10T02:30:01.777 回答
1

在“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 中再次工作

于 2014-11-28T19:08:58.537 回答
1

这已经很晚了，但这里的所有答案都不适用于 AngularJS 的最新版本的 angular-ui-router。从那个版本开始（特别是@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

希望这可以帮助某人！

于 2017-05-26T17:38:58.650 回答
0

这是一个非常简单且透明的替代方案，只需在 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: '....'
  })
于 2015-03-25T17:19:35.733 回答
0

添加angular-ui-router-default并将abstractanddefault选项添加到父状态：

...

.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/>某个位置。

于 2016-11-01T20:26:49.593 回答