角度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數據？