bootstrap navbar kilka błędów

Question

Używam niestandardowej dyrektywy kątowej do implementacji paska nawigacyjnego bootstrap. Tu jest mój kodu:

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

}]}}]) 

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

i używam go w nagłówku jak

<tag-navbar></tag-navbar> 

Są 2 błędy

(lub konfigurowalne ustawienia domyślne?)

1. w przeglądarce rozmiaru urządzenia mobilnego, nav pasek jest domyślnie rozwijany. Nie jestem pewien, czy jest to zachowanie domyślne, które myślę, że nie jest to większość użytkowników chce

2. powiedzmy im na stronie /profile, chcę, aby odświeżyć stronę klikając profile zakładce nav, ale link nie jest klikalny . Muszę sprawić, by było klikalne.

CSS na pasku nawigacyjnym (używam 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:

Gdybym bezpośrednio korzystać

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

To działa, ale

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

to nie działa. Ale my-navbar zapadaniu jest zdefiniowana w ten sposób, który powinien być taki sam

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

Answer 1

Problem polega na tym, że nie należy również grupować collapse.Z tego samego powodu nie można używać data-toggle="my-collapse"

Spróbuj tego:

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

iw pasku nawigacyjnym

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

Answer 2

Tak masz rację, bootstrap navbar jest domyślnie zwinięty w telefonii komórkowej. Po kliknięciu na ikonę pojawi się ikona Hamburger, a następnie rozwinięta.

Aby rozwiązać ten problem, dodaj następującą właściwość do klasy my-navbar-collapse w zapytaniu o media.

Można dp to jak następuje:

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

Ten kod działa & pasek nawigacyjny będzie wyświetlana rozszerzony aż do szerokości ekranu jest lessthan lub równa 640

Dla 2nd problemu, albo trzeba utworzyć funkcję dla każdego adresu URL z adresem $ scope.go ("url") [co jest złym sposobem] lub odnieść się do tej strony, na której użytkownik miał ten sam problem:

Angularjs - refresh when clicked on link with actual url

Mam nadzieję, że pomoże to rozwiązać problem.