Angular JS：控制器創建的菜單項上的「活動」類

我正在使用JSON服務來列出菜單項（鏈接）。在瀏覽不同的路由/頁面時，我希望將一個「活動」類添加到當前活動的鏈接（即用戶所在的頁面）。Angular JS：控制器創建的菜單項上的「活動」類

我用這個的jsfiddle爲出發點：http://jsfiddle.net/p3ZMR/4/

我還發現了幾個答案在這裏計算器，但個個都是類似上述的解決。

但是，如果通過NG-重複生成的鏈接，解決方案不起作用：

<ul class="main-menu"> 
    <li ng-repeat="page in pages"> 
     <a href="/#/{{page.id}}" active-link="active">{{page.name}}</a> 
    </li> 
    </ul>

看來，如果控制器添加鏈接之前的指令被調用。

有什麼辦法可以解決這個問題嗎？

來源

2013-05-15 Adam Gerthel

可能重複[如何突出AngularJS當前菜單項？]（HTTP：/ /stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item-in-angularjs） –

我不這麼認爲。那裏的解決方案需要鏈接硬編碼 –

不。你可以說'getClass（'/＃/'+ page.id）'，它不會被硬編碼。 –

一個主要的編程概念是關注的分離。我個人不喜歡在我的觀點中保留邏輯或比較。我寧願保持業務邏輯和比較在JavaScript

HTML

<ul class="main-menu"> 
    <li ng-repeat="page in pages"> 
     <a ng-click="menu(page)" ng-class="{ active: isActive(page.url)>{{page.name}}</a> 
    </li> 
</ul>

的Javascript

angular.module('link', []) 

function myController($scope, $location){ 
    $scope.links = [ 
    { url: "one", name: "One"}, 
    { url: "two", name: "Two"}, 
    { url: "", name: "Three"} 
    ]; 

    $scope.isActive = function (viewLocation) { 
     var pattern = '/' + viewLocation, 
      re = new RegExp(pattern); 
     return re.test($location.path()); 
    }; 

    $scope.menu = function (location) { 
     $location.path('/' + location.location); 
    }; 
}

的

來源

2014-03-10 19:12:58

吳級是爲此製作的。查看關於ng-class的角度文檔頁面的評論，因爲它沒有很好的文檔記錄。

來源

2013-05-15 21:43:56 Jason

HTML用於重複鏈接

<div ng-app="link"> 
    <div data-ng-controller="myController"> 
     <a href="#/{{ link.url }}" data-ng-repeat="link in links" data-ng-class="(link.url == location.path() && 'active')"> 
      {{ link.name }} 
     </a> 
    </div> 
</div>

的Javascript

angular.module('link', []) 

function myController($scope, $location){ 
    $scope.location = $location; 
    $scope.links = [ 
     { url: "one", name: "One"}, 
     { url: "two", name: "Two"}, 
     { url: "", name: "Three"} 
    ]; 
}

這將產生一個鏈接/ 2/3具有三個被突出顯示在紅色。這裏是一個jsfiddle：http://jsfiddle.net/4mFYy/1/

來源

2013-05-16 01:31:59

你的jsfiddle似乎沒有工作。「活躍」類僅在點擊時添加？嘗試將.active顏色更改爲「綠色」，並且僅適用於頁面加載。 –

它不起作用，因爲沒有任何路由提供者的東西連線。這只是一個演示，向您展示如何實現它。 –

嗯，我想我錯過了一些細節，當我嘗試它，例如我的網址是/＃/ foo，所以我需要檢查location.path（）排除「/」我。e'$ location.path（）。replace（「/」，「」）;'。要再去一次。 –

作爲您的出發點的作者，我更新了小提琴，所以它現在應該適用於您的動態URL :)。

angular.module('link', []). 
    directive('activeLink', ['$location', function(location) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs, controller) { 
      var clazz = attrs.activeLink; 
      scope.location = location; 
      scope.$watch('location.path()', function(newPath) { 
       if (attrs.href.substring(1) === newPath) { //<------ Here it is already interpolated 
       element.addClass(clazz); 
       } else { 
       element.removeClass(clazz); 
       } 
      }); 
     } 

    }; 

    }]). 
    controller('MyCtrl', ['$scope', function(scope) { 
    scope.pages=[ 
     { url: "one", name: "One"}, 
     { url: "two", name: "Two"}, 
     { url: "three", name: "Three"}, 
     { url: "", name: "home"} 
    ]; 
    }]);

http://jsfiddle.net/p3ZMR/59/

的問題是，該指令是讀出href屬性，它被插前。我以某種方式改變了它，在插入後href會被讀出。

來源

2013-08-10 10:36:39 kfis

Angular JS：控制器創建的菜單項上的「活動」類

回答

相關問題