引導導航欄如何使當前選項卡的鏈接點擊

Question

我有以下的導航欄實現

HTML頁面：

<nav class="my-navbar"> 
    <div class="my-navbar-header"> 
     <button type="button" class="my-navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="my-icon-bar"></span> 
     <span class="my-icon-bar"></span> 
     <span class="my-icon-bar"></span> 
     </button> 
     <a class="my-navbar-brand" href="/#!/">Apple Fanboy</a> 
    </div> 
    <div class="collapse my-navbar-collapse" id="myNavbar"> 
     <ul class="my-navbar-nav"> 
     <li ng-class="classForNavWithPath('/')"><a href="/#!/">Home</a></li> 
     <li ng-class="classForNavWithPath('/article')"><a href="/article#!/">article</a></li> 
     <li ng-class="classForNavWithPath('/profile')"><a href="/profile#!/">profile</a></li> 
     <li ng-class="classForNavWithPath('/editor')"><a href="/editor#!/">editor</a></li> 
     <li ng-class="classForNavWithPath('/admin')"><a href="/admin#!/">admin</a></li> 
     <li ng-class="classForNavWithPath('/test')"><a href="/test#!/">test</a></li> 
     </ul> 

     <ul class="my-navbar-nav-right"> 
     <li ng-show="showSignout"> 
      <a ng-href="{{signoutServerUrl}}">sign out</a> 
     </li> 
     <li ng-show="showSignin"> 
      <a ng-href="{{signinClientUrl}}">sign in</a> 
     <li ng-show="showSignup"> 
      <a ng-href="{{signupClientUrl}}">sign up</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 
</div> 

在我的JavaScript代碼（我採用了棱角分明的自定義指令）

$scope.userService = userService 

    var curUrl = $window.location.pathname + $window.location.hash 
    $scope.signinClientUrl = helper.urlWithQuery('/auth#!/signin', {redirect:curUrl}) 
    $scope.signupClientUrl = helper.urlWithQuery('/auth#!/signup', {redirect:curUrl}) 

    $scope.signoutServerUrl = helper.urlWithQuery(constant.webapi.user.signout, {successRedirect:'/', failureRedirect:curUrl}) 
    $scope.classForNavWithPath = function(path) { 

     var pathname = $window.location.pathname 
     var hash = $window.location.hash 
     return (pathname == path ? 'active' : '') 
    } 
    $scope.showSignin = ! userService.isAuthenticated() 
    $scope.showSignup = ! userService.isAuthenticated() 
    $scope.showSignout = userService.isAuthenticated() 

當用戶已在/article選項卡中時，article鏈接變爲高亮顯示，但不可點擊。我如何啓用此鏈接並重新加載頁面？我相信大多數其他網站都有這種行爲）

這是一個bootstrap問題嗎？或角引導組合？

Answer 1

這不是引導問題，而是角度問題。 Angular專爲單頁面應用程序設計，不會爲同一網址重新加載頁面。你必須手動注入$route服務

$route.reload() 

如果要強制重新加載整個頁面（從服務器重新讀取）重裝，你必須從本地JavaScript代碼調用

$scope.clickedLink = function(pathname) { 
    if ($window.location.pathname === pathname) 
     $window.location.reload(true) 
    else 
     $window.location.pathname = pathname 
} 

，改變你的鏈接到

<li ng-class="classForNavWithPath('/article')"><a ng-click="clickedLink('/article')">article</a></li> 

注意，我刪除href屬性