bootstrap navbar несколько ошибок

Question

Я использую угловую настраиваемую директиву для реализации бутстрапа navbar. Вот мой код:

"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. скажут им в /profile страницы, я хочу, чтобы обновить эту страницу, нажав на profile вкладке нава, но ссылка не кликабельна , Мне нужно сделать его интерактивным.

CSS для навигационной панели (я использую дерзость)

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

Если я непосредственно использовать

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

Это работает, но

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

не работает. Но моя-Navbar коллапса определяется как это, которое должно быть таким же

.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

Да, вы правы, бутстраповская Navbar свернута по умолчанию в мобильном телефоне. И значок гамбургера появится &, когда вы нажмете на него, то же самое будет расширяться.

Чтобы преодолеть это, добавьте следующее свойство: класс my-navbar-collapse в медиа-запросе.

Вы можете дп это нравится следующим образом:

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

Этот код работает & панели Navbar будет казаться расширена до ширины экрана не LessThan или равна 640px

Для вашего 2-ой проблемы, вам необходимо либо сделать функцию для каждого URL, который имеет $ scope.go («URL») [который является плохим способом], либо обратитесь к этой странице в whihc пользователь сталкивается с той же проблемой

Angularjs - refresh when clicked on link with actual url

Я надеюсь, что это поможет вам решить вашу проблему.