Question

我的网站上有一个菜单，其中的项目处于活动状态。默认状态为areas，然后我可以浏览我的网站更改状态。

<li ui-sref-active="active">
    <a ui-sref="areas">
        <span>Areas</span>
    </a>
</li>

.state('areas', {
    url: '/areas',
    templateUrl : 'templates/areas.html',
    controller  : 'AreaCtrl'
})

在我的areas.html模板中，我有一个列表，其中包含可以点击的项目......：

<li ng-repeat="area in areas" ui-sref="areas.city({areaId: area.area_id, areaName: area.name})">

现在，当点击其中一个时，我需要在菜单上保持活动状态。所以这样做的唯一方法是通过嵌套状态......

.state('areas.city', {
    url: "/:areaId/:areaName",
    templateUrl: 'dist/templates/cities.html',
    controller: 'CityCtrl'
})

但问题是，我的cities.html需要是一个全新的视图（取代areas.html所在的位置），它不会嵌套在areas中（所以我在<ui-view>内没有areas.html。

我可以，只是不嵌套视图，因此状态为.state('city'，但我在菜单上丢失了active状态。

我是如何解决这个问题的？

Answer 1

您可以在主菜单中激活状态，如下所示

<li ng-class="{active: $state.includes('area') || $state.includes('areas.city')}">
    <a ui-sref="areas">
        <span>Areas</span>
    </a>
</li>

另外，请将$ state应用到$ rootScope中。这样你就可以在任何视图中访问$ state。

myApp.run(function($rootScope, $state) {
    $rootScope.$state = $state;
});

AngularJS UI路由器 - 具有单独视图的嵌套状态

1 个答案: