Question

我的路由看起来像这样（删除了when()中的第二个参数，以便于阅读）：

app.config(function($routeProvider, $locationProvider){

    // Prepare for html5 mode
    $locationProvider.hashPrefix('!');
    $locationProvider.html5Mode(true);

    // Setup routing
    $routeProvider.when('/dashboard/main', {
    }).when('/dashboard/website/:id/clicks', {
    }).when('/dashboard/website/:id/uploads', {
    }).when('/dashboard/website/:id/forms', {
    }).when('/dashboard/website/:id', {
    }).otherwise({
        redirectTo: '/dashboard/main'
    });

});

然后我有导航链接，我想在:id不存在时禁用它。

<ul class="nav nav-pills nav-stacked">
    <!-- always active -->
    <li>
        <a href="/dashboard/main"><i class="glyphicon glyphicon-home"></i> Home</a>
    </li>
    <!-- active only if :id is set -->
    <li>
        <a href="/dashboard/clicks"><i class="glyphicon glyphicon-hand-up"></i> Clicks</a>
    </li>
    ...
</ul>

如何在:id出现时自动启用第二项，并在:id不存在时自行停用？

Answer 1

您可以在控制器内使用$ routeParams并检查：

$scope.Options = $routeParams.id !== 'undefined'

将视图更改为

<li ng-show='Options'>
        <a href="/dashboard/clicks"><i class="glyphicon glyphicon-hand-up"></i> Clicks</a>
    </li>

Answer 2

您可以在控制器中注入$routeParams

app.controller('yourControllerName', ['$routeParams', '$scope', function($routeParams, $scope){
$scope.isActive = inactive;
if($routeParams.id){
    $scope.isActive = active;
}
}]);

在你的标记中，

<li data-ng-class="isActive">
        <a href="/dashboard/clicks"><i class="glyphicon glyphicon-hand-up"></i> Clicks</a>
</li>

然后使用CSS

为.inactive和.active类提供合适的样式

当路径参数存在或不存在时启用或禁用链接

2 个答案: