bootstrap navbar diversi errori

Question

Uso la direttiva angolare personalizzata per implementare una barra di navigazione bootstrap. Ecco il mio codice:

"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() 

}]}}]) 

e 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> 

e lo uso nell'intestazione come

<tag-navbar></tag-navbar> 

Ci sono 2 errori

(o inadempienze configurabili?)

1. su un browser di dimensioni mobili, il nav la barra è predefinita per essere espansa. Non so se è un comportamento di default, che credo non è la maggior parte degli utenti vuole

2. diciamo im nella pagina /profile, voglio aggiornare la pagina cliccando su profile scheda nav, ma il link non è cliccabile . Devo renderlo cliccabile.

CSS per la barra di navigazione (io uso 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 
    } 
    } 
} 

EDIT:

Se uso direttamente

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

Sta funzionando, ma

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

non funziona. Ma il mio-navbar-crollo è definita come questo, che dovrebbe essere la stessa

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

Answer 1

Il problema è che non si dovrebbe raggruppare collapse pure.Per lo stesso motivo non è possibile utilizzare data-toggle="my-collapse"

Prova questa:

.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 
    } 
    } 

E nella barra di navigazione

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

Answer 2

Sì hai ragione, la barra di navigazione bootstrap è compresso per impostazione predefinita nella telefonia mobile. E un'icona Hamburger apparirà & quando si fa clic su di esso la stessa espansione.

Per risolvere questo problema, aggiungere la proprietà di seguito alla classe my-navbar-collapse in una query multimediale.

È possibile dp le cose come segue:

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

Questo codice funziona & la barra di navigazione apparirà ampliato fino a quando la larghezza dello schermo è lessthan o uguale a 640px

Per il vostro secondo problema, si sia necessario fare una funzione per ogni URL che ha un $ scope.go ('url') [che è un brutto modo] oppure fare riferimento a questa pagina in fattore di forte l'utente stava affrontando lo stesso problema

Angularjs - refresh when clicked on link with actual url

Spero che questo aiuti a risolvere il tuo problema.