角度路線菜單有效

我嘗試提前解釋我的問題，對不起我的英語不好。角度路線菜單有效

我已經寫代碼的角度和角速度路線我的導航欄看起來像這樣在HTML

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

和路由PARAMS

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

一切完美，但我questin是：

當路線已被載入或激活時，如何將一些CSS設置爲我的li元素？

來源

2015-04-17 Shaxrillo

你必須在這裏處理主題。

首先，看看ngClass。在那裏你可以把Angular邏輯放在類裏，所以它隨着範圍值或函數返回而改變。

因此，您必須處理通過控制器傳遞範圍和數據，或者根據您的應用程序的結構。

對於第二個話題，here is a good SO question/answer這也解釋了它相當不錯。

來源

2015-04-17 10:14:07

ng-class不適用於我，因爲每個元素都有不同的分隔？有沒有類似於加載url時'ng active'的方式？ – Shaxrillo

在角UI有一個部件（角UI），檢查該路由當前是否處於活動或不：這裏有一個從它的文檔的例子：Angular-UI Utils

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

什麼它只是意味着，該路由時在用戶界面當前被訪問，活動應啓用。

如果你想使用角度來做，你可以這樣做。

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

來源

2015-04-17 10:24:15

這對於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路由器，它只是一個添加的物質屬性如下，

<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>

這將使項目突出顯示au以當前狀態匹配時爲主。

希望這有助於

〜Ragesh

來源

2015-04-17 10:24:27 RageshAK

在控制器是附加到菜單，注入$state。這將提供有關您現在處於狀態的信息。 ng-class="active: $state === actual_state_name" 將設置活動類。我想在注入後你可以使用$ state來查看，但是你需要通過Yourself檢查它。

另一種解決方案，不是以角度方式獲取javascript window對象。類似的是$位置，提供有關實際鏈接和其他很酷的功能的信息

來源

2015-04-17 10:28:43 Janko

角度路線菜單有效

回答

相關問題