Angular UI路由器,如何从控制器获取当前状态的祖先列表



我的状态层次结构是(从上到下):

  1. root
  2. account
  3. account.invoices
  4. account.invoices.detail

当我处于account.invoices.detail状态时,我想获得祖先状态的列表:

angular
    .module('app')
    .controller('InvoiceDetailCtrl', ['$scope', '$state', function ($scope, $state) {
        var current = $state.current.name;
        // Get ancestors from current state
        // Tried $state.current.parent, $state.parent, $state.parent(current)
    }]);

Angular UI路由器允许您转换到父状态(即从具有data-ui-sref="^"的视图),因此应该可以实现这一点(沿着祖先链一直到root)。

我需要这个来构建一个类似于自动面包屑的功能。

编辑:由于公认的答案:

var current = $scope.$state.$current,
     parent = current.parent,
     ancestors = [current.name];
while (typeof parent != 'undefined' && parent.name.length) {
    ancestors.push(parent.name);
    parent = parent.parent;
}

如果你问为什么要检查parent.name.length,那是因为Angular UI中有一个类似"根"的状态(无法获得任何文档)。

看看$state.$current.includes;它似乎返回了一个具有与当前状态和父状态匹配的键的对象。我相信这些州都会通过$state.includes()测试。

在控制器中:

function getParentList(state) {
 var parentList = [];
 var state = state.parent;
 while(state) {
  parentList.push(state.toString());
  state = state.parent;
 }
 return parentList;
}
var parents = getParentList($state.$current);

最新更新