角度ui.router。 深层嵌套路线

Question

以下是检查http://embed.plnkr.co/uVMlkk/preview的示例

当我们导航到'page2'路线时，有一个'嘿，我是一个子路径'的注释。 但是一旦我们在其他任何地方导航，那笔记就会永远消失。

目标是立即显示一些嵌套状态（作为默认状态）。

我假设应该有一些使用$ state.go（）的情况，但到目前为止无法弄明白。 任何帮助都非常感谢。

州定义片段：

  .state('root.page2.tab', {
    url: '/:tabId',
    templateUrl: 'tpl.page2.tab.html',
    controller: 'Page2TabController'
  })

  .state('root.page2.tab.subroute', {
    url: '',
    templateUrl: 'tpl.page2.tab.subroute.html'
  })

'tpl.page2.tab.subroute.html'的内容：

hey, I'm a subroute

相关控制器：

  .controller('Page2TabController', ['$scope', '$state', function($scope, $state) {
    $scope.tabId = $state.params.tabId;
    $state.go('root.page2.tab.subroute');
  }])

Answer 1

有固定版本 。

我从'root.page2.tab.subroute'删除了网址

.state('root.page2.tab.subroute', {
    //url: '',
    templateUrl: 'tpl.page2.tab.subroute.html'
})

并且因为父级已经定义了参数tabId ：

.state('root.page2.tab', {
    url: '/:tabId',
    templateUrl: 'tpl.page2.tab.html',
    controller: 'Page2TabController'
})

我们必须在redicrection中传递该参数：

.controller('Page2TabController', ['$scope', '$state', function($scope, $state) {
    $scope.tabId = $state.params.tabId;
    // instead of this
    // $state.go('root.page2.tab.subroute');
    // we need this
    $state.go('root.page2.tab.subroute', $state.params);
 }])

在这里查看工作的固定版本

另一种方法 - 使用redirectTo - 有一个工作的plunker

一种方式，受此启发：

使用AngularJS中的UI-Router将状态重定向到默认子状态

可能是添加一个非常智能但小的重定向代码段：

.run(['$rootScope', '$state', function($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}])

并调整我们的状态：

.state('root.page2.tab', {
    url: '/:tabId',
    templateUrl: 'tpl.page2.tab.html',
    controller: 'Page2TabController',
    redirectTo: 'root.page2.tab.subroute',
})

在这里查看

Answer 2

如何处理场景有一个技巧：

家长应该触发一些行动

• 它被访问，或
• 当它从父母状态的孩子身边回来时，它再次到达

在这种情况下，我们可以使用“目标（ ui-view ）为孩子”作为特殊view ，使用特殊controller 。 这将是

• 一旦创建了父母，就会注入该位置
• 一旦孩子离开，再次注入该位置。 在这种情况下，它将重新初始化。

足够的解释。 有一个工作的plunker 。 有调整状态：

.state('root.page2', {
    url: '/page2',
    views: {
      'content@root': {
        templateUrl: './tpl.page2.html',
        controller: 'Page2Controller'
      },
      '@root.page2': {
        template: '<div></div>',
        controller: 'RedirectorController'
      }
    }
})

所以，现在我们可以在'RedirectorController'做一些魔术

.controller('RedirectorController', ['$scope', '$state', 
   function($scope, $state) {
      $state.go('root.page2.tab', { tabId: $scope.activeTabId });
}])

在这里检查它

在此处阅读更多关于新视图/控制器从另一个获取的内容（仅按视图层次结构的范围继承）

• 在ui-router中使用左栏布局的嵌套状态或视图？
• 如何在angularjs ui-router中的状态之间共享$ scope数据？