角線菜單激活

Question

我想提前解釋一下我的問題，對不起我的英語不好。

我已經用角度和角度路線編寫了代碼，我的導航欄在html中看起來像這樣

<ul nav-menu>
    <li><a href="">Index</a></li>
    /*others*/
</ul>

和路由參數

    $routeProvider
        .when('/', {
            templateUrl: 'views/main.html',
            controller: 'mainCtrl' 
        })
        .when('/skills', {
            // others
        })

一切正常，但我的追求是：

路由已加載或處於活動狀態時，如何為li元素設置一些CSS？

Answer 1

您在這里不僅要處理主題 。

1. 首先，看看ngClass 。 在那里，您可以將Angular邏輯放入類中，因此它隨作用域值或函數返回而變化。
2. 因此，您必須處理通過控制器傳遞的范圍和數據，或者取決於應用程序的結構。

對於第二個主題， 這是一個很好的SO問題/答案 ，很好地解釋了它。

Answer 2

在angular UI中，有一個組件（Angular UI）用於檢查路由當前是否處於活動狀態：這是其文檔中的示例： Angular-UI Utils

<a ui-route="/page" ng-class="{active: $uiRoute}">link</a>

它的簡單含義是，當當前訪問ui-route中的路由時 ，應該啟用活動類。

如果您只想使用angular進行操作，則可以這樣做。

<li><a ng-href="/home" ng-class="{'active: $location.path() ==='/home'}">Home</a></li>

Answer 3

使用Angular相當簡單。

您可以如下所示為NavBar定義一個控制器，

<ul nav-menu ng-controller="NavbarCtrl">
    <li ng-class={active : isRouteActive("/home")}><a href="/home">Index</a></li>        
</ul>

然后，您的控制器應定義如下，

app.module("myApp",["ngRoute"])
  .controller("NavbarCtrl", function($scope, $location) {

   $scope.isRouteActive = function(route) { 
        var curRoute = $location.path();
        return curRoute.match(route);
    }

});

如果您使用的是UI Router，則只需添加以下屬性，

<ul class="nav navbar-nav">
            <li ui-sref-active="active"><a ui-sref="home">Home</a></li>
            <li ui-sref-active="active"><a ui-sref="about">About</a></li>
        </ul>

當前狀態匹配時，這將使該項目自動突出顯示。

希望這可以幫助

〜拉吉什

Answer 4

在附加到菜單的控制器中，注入$state 。 這將提供有關您當前所處狀態的信息。 ng-class="active: $state === actual_state_name"將設置活動類。 我想在注入之后您可以在視圖中使用$ state，但是您需要自己檢查它。

另一個解決方案，而不是角度的方式是獲取javascript window對象。 類似的是$ location，whitch提供有關實際鏈接和其他出色功能的信息