Question

我有一个单页角应用程序，其导航包含一系列主要部分链接和每个子菜单。

我已经能够使用带有routeProvider的activetabs来激活主要部分链接，但是如何在该页面上同时为子页面链接提供活动类。

例如，当打开第1页＆＃39; ＆＃39; section1＆＃39;中的一个页面section，section1和page1按钮都有一个活动类？

我可以在子页面链接中添加相同的ng-class属性，但显然这意味着当您在父节中的任何页面上时，他们都会拥有活动类。从我所见，angular只支持顶级的活动导航链接而不是嵌套。

-

当前app.js示例：

app.config(function($routeProvider, $locationProvider) {
$routeProvider    
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController as main',
        activetab: 'home'
    })

    .when('/home', {
        templateUrl: 'pages/home.html',
        controller: 'mainController as main',
        activetab: 'home'
    })

    .when('/newPayroll', {
        templateUrl: 'pages/page2.html',
        controller: 'page2controller as page2',
        activetab: 'section2'
    })

    .when('/employeesList', {
        templateUrl: 'pages/page3.html',
        controller: 'page3controller as page3',
        activetab: 'section3'
    })
})

Answer 1

首先，我建议您查看Ui router。它将帮助您以一种您无法想象的方式处理视图，嵌套视图。

要回答您的问题，您可以通过使用ng-class来定义要为按钮或任何内容设置活动状态的任何逻辑。只需在控制器中创建一些逻辑来检查某些内容并将其设置为ng-class的条件。

可以使用$location service或您数据中的其他内容检查网址。这里有一个链接，可以帮助您以很多方式使用ng-class来实现您的目标： https://scotch.io/tutorials/the-many-ways-to-use-ngclass

希望它能帮到你

AngularJS activetab - 具有多个活动链接

1 个答案: