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

有个fixed version.

我从 'root.page2.tab.subroute'

中删除了 url

.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

一种方式，受此启发：

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

.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

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

Parent should trigger some action in case that

it is accessed, or

its reached again, when navigating back from child in a parent state

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

在创建 parent 后注入到该位置并且
re-injected 再次进入该位置，一旦 child 离开。在这种情况下，它将是 re-init.

足够的解释。有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

中查看

在此处阅读更多关于新 view/controller 从另一个 （仅限视图层次结构的范围继承） 获得的信息

How do I share $scope data between states in angularjs ui-router?

Angularui.router。深层嵌套路由

Angular ui.router. Deep nested routes

state

nested

angularjs

angular-ui-router