Question

我正在尝试为SPA中的导航添加一些自动化功能。

基本上我有几个顶级状态，在它们下面有子/嵌套状态。

$stateProvider.state('home', { url: '/' })
          .state('products', { url: '/products' })
          .state('products.details', { url: '/products/{productId}' })
          .state('products.details.images', { url: '/images' })
          .state('products.details.vendors', { url: '/vendors' })
          .state('products.details.attachments', { url: '/attach' });

我想在状态改变时利用这些状态声明，并构建用于显示子导航的对象列表。像这样：

$rootScope.$on('$stateChangeStart', function (event, toState) { 
   // Get child states of 'toState' and build the UI
});

例如：

当前状态为“home”时，显示以下内容：

主页
产品

当前状态为'products.details'时，显示以下内容：

主页
产品
- 我的产品
- 图片
- 供应商
- 附件

...动态构建子导航。

有没有办法点击$stateProvider之类的东西并找到子状态？

Answer 1

$ state.get（）返回所有对象的配置对象或数组。然后，您可以遍历返回的数组/对象并创建树结构。

以下函数将以树格式返回应用程序中的状态。

$scope.getStateTree = function() {
        var states = $state.get();
        var stateTree = {};
        for (var i = 0; i < states.length; i++) {
            var stateName = states[i].name;
            if (stateName != "") {
                if (stateName.indexOf(".") > -1) {
                    var children = stateName.split(".");
                    var currentTreeNode = stateTree[children[0]];
                    for (var j = 1; j < children.length; j++) {
                        if (!currentTreeNode.hasOwnProperty(children[j])) {
                            currentTreeNode[children[j]] = {};
                            currentTreeNode=currentTreeNode[children[j]];
                        }
                    }
                } else {
                    if (!stateTree.hasOwnProperty(stateName)) {
                        stateTree[stateName] = {};
                    }
                }
            }
        }
        return stateTree;
    };

如何获取给定状态的所有子/嵌套状态

1 个答案: