Angular ui.router。深层嵌套路由

Question

这是一个检查http://embed.plnkr.co/uVMlkk/preview的例子

当我们导航到“page2”路线时，会出现“嘿，我是子路线”的注释。 但是，一旦我们导航到其他任何地方，该注释就会永远消失。

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

我认为应该有一些使用 $state.go() 的情况，但目前无法弄清楚。非常感谢任何帮助。

状态定义sn-p：

  .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

有一个fixed version。

我从'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'
})

我们必须在重定向中传递该参数：

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

检查工作的固定版本here

另一种方法 - 使用 redirectTo - 有 a working plunker

一种方式，受此启发：

Redirect a state to default substate with UI-Router in AngularJS

可能是添加一个非常聪明但很小的重定向代码sn-p：

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

查看here

Answer 2

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

如果发生这种情况，父母应该触发一些动作

• 它被访问了，或者
• 它再次到达，当从父状态的子导航返回时

在这种情况下，我们可以使用 "target (ui-view) for a child" 作为特殊 view 的位置，特殊的 controller强>。这将是

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

足够的解释。有a working 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 });
}])

查看action here

阅读更多关于新视图/控制器从另一个（仅限视图层次结构的范围继承）这里

• Nested states or views for layout with leftbar in ui-router?
• How do I share $scope data between states in angularjs ui-router?