UI-router 从子访问父状态答案

【问题标题】：UI-router accessing parent state from childUI-router 从子访问父状态
【发布时间】：2016-10-24 09:32:49
【问题描述】：

我想根据我的 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，但它没有这样的属性。有什么办法可以访问吗？

更新

我看到了这些问题： get parent state from ui-router $stateChangeStart, get parent state from ui-router $stateChangeStart 但是他们都没有对这个问题有明确的答案（除了后一个中的状态分裂黑客，但我宁愿避免这种情况）。

【问题讨论】：

检查 $state.$current.parent！

标签： javascript angularjs angular-ui-router

【解决方案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);

【讨论】：

【解决方案2】：

如果子状态没有定义标题，您似乎只需要 title 属性回退到父级的标题属性，我建议您使用此存储库：angular-ui-router-title。

【讨论】：

【解决方案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'
})

我将运行块更改如下：

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

这还不是完美的解决方案，因为在多个嵌套状态的情况下，最好回退到最年轻祖先的头衔，但现在就这样做了。

【讨论】：

【解决方案4】：

下面的代码对我有用

$state.$current.parent

【讨论】：

【解决方案5】：

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

$state.go('^');

返回父状态。

【讨论】：