bootstrap导航栏几个错误

Question

我使用角度自定义指令来实现启动导航栏。这里是我的代码：

"use strict"; 
var helper = require('../helper.js') 
var app = angular.module('custom_directive') 

app.directive('tagNavbar', [function() { 
    return { 
     restrict: 'E', 
     scope: { 
     }, 

     templateUrl: '/public/common/tag_navbar.html', 

     controller: 
    ['$scope', '$window', 'userService', 
function($scope, $window, userService) { 

    var curUrl = $window.location.pathname + $window.location.hash 

    //client url is used in <a href>, redirect purpose 
    $scope.signinClientUrl = helper.urlWithQuery('/auth#!/signin', {redirect:curUrl}) 
    $scope.signupClientUrl = helper.urlWithQuery('/auth#!/signup', {redirect:curUrl}) 

    //server url is used for rest api, like <form action> 
    //if signout success, better to redirect to home, since some page are not authorized 
    $scope.signoutServerUrl = helper.urlWithQuery('/auth/signout', {successRedirect:'/', failureRedirect:curUrl}) 


    $scope.classForNavWithPath = function(path) { 

     $scope.userService = userService 

     //pathname for which tab to highlight, use hash if the tab has dropdown list 
     var pathname = $window.location.pathname 
     var hash = $window.location.hash 
     return (pathname == path ? 'active' : '') 
    } 


    //todo: bug: unable to refresh page by clicking the same nav tab 

    $scope.showSignin = ! userService.isAuthenticated() 
    $scope.showSignup = ! userService.isAuthenticated() 
    $scope.showSignout = userService.isAuthenticated() 

}]}}]) 

和HTML：

<div class="tag-navbar"> 

    <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="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> 
      </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> 

我用它的头就像

<tag-navbar></tag-navbar> 

有2个错误

（或可配置的默认？）

1. 在手机尺寸浏览器中，导航栏默认为展开。不知道这是一个默认行为，我认为这不是大多数用户希望

2. 比方说IM在/profile页，我想通过点击profile导航选项卡上刷新页面，但链接无法点击。我需要让它可点击。

CSS的导航栏（我用SASS）

.my-navbar { 
    //Note: navbar = header + collapse 
    @extend .navbar; 
    @extend .navbar-default; 
    //Note: required by navbar logic, although .container is set to body 
    @extend .container-fluid; 

    .my-navbar-header { 
    @extend .navbar-header; 

    .my-navbar-toggle { 
     @extend .navbar-toggle; 

    } 

    .my-icon-bar { 
     //it's inside toggle, but can be inside other icons as well 
     @extend .icon-bar; 
    } 

    .my-navbar-brand { 
     @extend .navbar-brand; 
    } 
    } 

    .my-navbar-collapse { 
    @extend .collapse; 
    @extend .navbar-collapse; 

    .my-navbar-nav { 
     @extend .nav; 
     @extend .navbar-nav; 

    } 
    .my-navbar-nav-right { 
     @extend .my-navbar-nav; 
     @extend .navbar-right 
    } 
    } 
} 

编辑：

如果我直接用

<div class="collapse navbar-collapse" id="myNavbar"> 

它的工作，但

<div class="my-navbar-collapse" id="myNavbar"> 

它无法正常工作。 但我-导航栏崩溃这样定义，它应该是相同的

.my-navbar-collapse { 
    @extend .collapse; 
    @extend .navbar-collapse; 
    } 

Answer 1

问题是你不应该组collapse以及。出于同样的原因，你不能使用data-toggle="my-collapse"

试试这个：

.my-navbar-collapse { 
    //cannot put `collapse` and data-toggle's `collapse` here 
    @extend .navbar-collapse; 

    .my-navbar-nav { 
     @extend .nav; 
     @extend .navbar-nav; 

    } 
    .my-navbar-nav-right { 
     @extend .my-navbar-nav; 
     @extend .navbar-right 
    } 
    } 

而且在导航栏

<div class="collapse my-navbar-collapse" id="myNavbar"> 

Answer 2

是的，你说得对，引导导航栏默认情况下，在移动崩溃了。当你点击它时，汉堡图标将会出现&。

要解决此问题，请在媒体查询中将以下属性添加到my-navbar-collapse类中。

可以dp的它像如下：

@media only screen and (max-width: 640px) { 
.my-navbar-class { 
    display: block; 
} 
} 

此代码工作&导航栏会出现膨胀，直到屏幕宽度为每种不超过或等于640像素，

为了您的第二个问题，您可能需要为每个具有$ scope.go（'url'）[这是一种糟糕的方式]的url创建一个函数，或者在用户面临同样的问题时引用此页面

Angularjs - refresh when clicked on link with actual url

我希望这可以帮助您解决您的问题。