Question

我想根据角度应用中的状态设置标题。它工作得很好，但是如果在子状态上没有定义标题，我想回到父级的title属性。

这是我到目前为止所做的：

在我的应用运行块中

...
$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 但是他们都没有对这个问题有明确的答案（除了后者中的状态分裂黑客，但我宁愿避免这种情况）。

Answer 1

两种方式都是黑客攻击。不要忘记在控制器中导入$ state（和$ stateParams for 2nd variant）提供程序。您可以使用：

$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属性回退到父标题属性，我建议您使用此存储库：angular-ui-router-title。< / p>

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' })感觉 - 不要用自定义属性污染状态定义。）

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

我按如下方式更改了runblock：

li

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

Answer 4

以下代码正在为我工作

$状态。$ current.parent

Answer 5

在“收件人”部分中查看UI路由器documentation，您可以执行以下操作：

$ state.go（'^'）;

返回到父状态。

UI路由器从子级访问父状态

5 个答案: