Включить или отключить ссылки, когда параметр маршрута присутствует или нет

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> 

Затем обеспечить подходящие стили для .inactive и .active классов с помощью CSS