Question

我正在尝试使用带有StateHelper的AngularJS UI路由器库动态绘制嵌套导航结构（请参阅下面的示例JSON）。

我正在努力寻找一种方法来访问嵌套模板中的子数组。有没有办法访问与当前模板/控制器关联的状态？

我尝试使用$state.current，但这不起作用，因为它在每个嵌套级别解析为相同的值（正确地如此）。我需要能够访问＆＃34;当前＆＃34;状态，即在那个时刻呈现的状态。

任何想法都非常受欢迎!!

nested.html

<ul class="nav nav-tabs">
    <li ng-repeat="tab in children" ui-sref-active="active">
        <a data-ui-sref="{{tab.name}}" ng-bind-html="tab.name"></a>
    </li>
</ul>
<br />
<div data-ui-view></div>

示例导航

[{
    "name": "root",
    "template": "<ui-view/>",
    "children": [
        {
            "name": "a",
            "url": "/a",
            "templateUrl": "static/partials/nested.html",
            "children": [{
                    "name": "1",
                    "url": "/1",
                    "templateUrl": "static/partials/nested.html",
                    "children": [{
                            "name": "i",
                            "url": "/i",
                            "template": "Content for root.a.1.i"
                        }, {
                            "name": "ii",
                            "url": "/ii",
                            "template": "Content for root.a.1.ii"
                        }]
                }, {
                    "name": "2",
                    "url": "/2",
                    "templateUrl": "static/partials/nested.html",
                    "children": [{
                            "name": "i",
                            "url": "/i",
                            "template": "Content for root.a.2.i"
                        }, {
                            "name": "ii",
                            "url": "/ii",
                            "template": "Content for root.a.2.ii"
                        }]
                }
            ]
        }, {
            "name": "b",
            "url": "/b",
            "template": "Content for root.b"
        }]
}]

Answer 1

ui-view 元素附加了一个名为$uiView的数据字段，其中包含视图名称和关联 state。您可以像这样获得state：

elem.closest('[ui-view]').data('$uiView').state

甚至

elem.inheritedData('$uiView').state

所以，在你的controller：

中

.controller('State1Ctrl', function ($state) {
  console.log(elem.closest('[ui-view]').data('$uiView').state); // state1
});

看看这对你有帮助。同样使用ui-sref，有可能：

<ul class="nav nav-tabs">
    <li ng-repeat="tab in children" ng-class="{ active: $state.current == 'tab.name' }">
        <a data-ui-sref='tab.name' ng-bind-html="tab.name"></a>
    </li>
</ul>

假设 tab.name 包含您的州。

如何访问＆＃34;当前＆＃34;嵌套状态使用带有状态帮助器的角度ui路由器

1 个答案: