UI路由器從孩子訪問父狀態

Question

我想根據我的 angular 應用程序中的狀態設置標題。 它工作得很好，但如果沒有在子狀態上定義標題，我想回到父級的標題屬性。

這是我到目前為止：

在我的應用程序運行塊中：

...
$rootScope.$on('$stateChangeSuccess', function (event, current, previous) {

  if (current.hasOwnProperty('title')) {
    $rootScope.title = current.title;
  }
});
...

在我的模塊路線中

.state('main.parent', {
  url: '/parent',
  controller: 'ParentController',
  controllerAs: 'vm',
  templateUrl: 'app/parent.html',
  title: 'Parent',
})
.state('main.parent.child', {
  url: '/child',
  controller: 'ChildController',
  controllerAs: 'vm',
  templateUrl: 'app/child.html'
})

在代碼檢查中，我發現$stateChangeSuccess被觸發了兩次，首先是父級，然后是子級。 當孩子被調用時，我試圖訪問current.parent ，但它沒有這樣的屬性。 有什么方法可以訪問它嗎？

更新

我看到了這些問題：從 ui-router $stateChangeStart 獲取父狀態，從 ui-router $stateChangeStart 獲取父狀態但是他們都沒有對這個問題有明確的答案（除了后一個中的 state splitting hack 但我寧願避免這種情況）。

Answer 1

這兩種方式都有點小技巧。 不要忘記在您的控制器中導入 $state（和 $stateParams 用於第二個變體）提供程序。 您可以使用：

$state.$current.parent.self.title 

或

var tree = current.name.split('.');
tree.splice(tree.length-1, 1);
var parent = tree.join('.');
$state.get(parent, $stateParams);

Answer 2

如果子狀態上沒有定義title ，您似乎只需要title屬性來回退到父級的 title 屬性，我建議您使用這個存儲庫： angular-ui-router-title 。

Answer 3

所以最后我想出了以下解決方案：

我將title存儲在狀態的data對象中，因為從$state不能訪問父級的自定義屬性，只能訪問存儲在data屬性（這是有道理的 - 不要用自定義屬性污染狀態定義）。

.state('main.parent', {
  url: '/parent',
  controller: 'ParentController',
  controllerAs: 'vm',
  templateUrl: 'app/parent.html',
  data: {
    title: 'Parent'
  }
})
.state('main.parent.child', {
  url: '/child',
  controller: 'ChildController',
  controllerAs: 'vm',
  templateUrl: 'app/child.html'
})

我改變了 runblock 如下：

...
$rootScope.$on('$stateChangeSuccess', function (event, toState, fromState) {
  var current = $state.$current;
  if (current.data.hasOwnProperty('title')) {
    $rootScope.title = current.data.title;
  } else if(current.parent && current.parent.data.hasOwnProperty('title')) {
    $rootScope.title = current.parent.data.title;
  } else {
    $rootScope.title = null;
  }
});
...

這還不是完美的解決方案，因為在多個嵌套狀態的情況下，最好回退到最年輕祖先的頭銜，但現在這樣做了。

Answer 4

下面的代碼對我有用

$state.$current.parent

Answer 5

查看“to”部分中的 UI-Router 文檔，您可以執行以下操作：

$state.go('^');

回到父狀態。