我在AngularJS中设置了这样的路由:
$routeProvider .when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController}) .when('/lab', {templateUrl:'partials/lab', controller:widgetsController})
我在顶部栏上有一些链接的标签样式。如何根据当前模板或URL将“活动”类添加到选项卡?
一种无需依赖URL即可解决此问题的方法是在$routeProvider配置过程中向每个部分添加自定义属性,如下所示:
$routeProvider
$routeProvider. when('/dashboard', { templateUrl: 'partials/dashboard.html', controller: widgetsController, activetab: 'dashboard' }). when('/lab', { templateUrl: 'partials/lab.html', controller: widgetsController, activetab: 'lab' });
$route在您的控制器中公开:
$route
function widgetsController($scope, $route) { $scope.$route = $route; }
active根据当前活动选项卡设置类:
active
<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li> <li ng-class="{active: $route.current.activetab == 'lab'}"></li>