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链接会突出显示，但不会点击。如何启用此链接并重新加载页面？我相信大多数其他网站都有这种行为）

引导程序有问题吗？或角度引导组合？

Answer 1

这不是bootstrap的问题，而是有角度的。 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属性

bootstrap navbar如何使当前标签链接可点击

1 个答案: