[解決済み] AngularJSでアクティブなタブのスタイルを設定する

質問

AngularJSにこのようなルートが設定されています。

$routeProvider
    .when('/dashboard', {templateUrl:'partials/dashboard', controller:widgetsController})
    .when('/lab', {templateUrl:'partials/lab', controller:widgetsController})

トップバー上にタブのようなスタイルのリンクをいくつか置いています。現在のテンプレートまたはURLに応じて、タブに「active」クラスを追加するにはどうすればよいですか？

解決方法を教えてください。

URLに依存することなくこれを解決する方法は、すべてのパーシャルにカスタム属性を追加することです。 $routeProvider の設定は、このようになります。

$routeProvider.
    when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: widgetsController,
        activetab: 'dashboard'
    }).
    when('/lab', {
        templateUrl: 'partials/lab.html',
        controller: widgetsController,
        activetab: 'lab'
    });

露出 $route をコントローラに追加します。

function widgetsController($scope, $route) {
    $scope.$route = $route;
}

を設定します。 active クラスは、現在のアクティブなタブに基づいています。

<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>