使用AngularJS

Question

我創建基於關閉此一個

從這個tutorial

不過，我想保持積極的選擇，一旦鏈接被點擊發現http://plnkr.co/edit/xzcjStdvmkI2rpfMzLjI?p=preview的側邊欄上突出顯示當前欄選項卡。我試着添加數據切換，但似乎適用於nav-pills而不是navbar。我還發現，我已經嘗試實現的是，主動導航指令：

angular.module('sidebarmodule') 
    .directive('isActiveNav', ['$location', function ($location) { 
    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      scope.location = $location; 
      scope.$watch('location.path()', function (currentPath) { 
       if ('/#' + currentPath === element[0].attributes['href'].nodeValue) { 
        element.parent().addClass('active'); 
       } else { 
        element.parent().removeClass('active'); 
       } 
      }); 

     } 
    }; 
}]); 

我在側邊欄模板調用像這樣：

<li> <a is-active-nav href="#">Link1</a> </li> 

我嘗試另一種方法是在我的控制器加入

$scope.isActive = function (viewLocation) { return viewLocation === $location.path(); }; 

，然後添加到模板：

<li ng-class="{ active: isActive('/importinvoice')}"><a href="#/firstlink">First Link</a></li> 

但是，我所做的任何操作都不會在導航到該頁面後突出顯示側邊欄元素。我試圖避開jQuery，因爲我希望它只是一個AngularJS解決方案。

我嘗試了這個stackoverflow answer的大部分解決方案，但無法讓它們中的任何一個在重擊器上工作。

Answer 1

你是在正確的軌道上：

的isActive功能爲每個列表元素需要與其匹配的href參數傳遞 - 因此，在你給出的例子中，它應該是：

<li ng-class="{ active: isActive('/firstlink')}"><a href="#/firstlink">First Link</a></li> 

您還需要添加CSS中活動類的樣式。我不確定你是否已經完成了這個任務，因爲你提供的plunkr是不完整的。

見我Plunkr這裏：http://plnkr.co/edit/zE6sXEn4wHJufOlnNeld