当存在或不存在路由参数时，启用或禁用链路

Enable or disable links when a route parameter is present or isn't present

本文关键字：启用 链路 参数 存在 不存在 路由      更新时间：2023-09-26

我的路由看起来像这样(删除了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不存在时禁用自己?

你可以在控制器内部使用$routeParams并检查:

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

并将视图更改为

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

可以将$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类提供合适的样式
相关文章：