bootstrap navbar birkaç hata

Question

Bir bootstrap navbar uygulamak için açısal özel yönergeyi kullanıyorum.

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

}]}}]) 

ve html: İşte benim kodudur

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

Ve 2 hatalar var ben

<tag-navbar></tag-navbar> 

gibi başlığındaki kullanmak

(veya yapılandırılabilir varsayılan?) Bir mobil boyutta tarayıcıda, nav

1. Çubuğun varsayılan olarak genişletilmesi gerekir. o ben kullanıcıların en en /profile sayfasında im, ben profile nav sekmeyi tıklayarak sayfayı yenilemek istiyorum diyelim

2. istemiyor düşünüyorum, ancak bağlantı tıklanabilir olmadığı varsayılan bir davranış olup olmadığından emin değil . Tıklanabilir hale getirmem gerekiyor. gezinme çubuğu için

CSS (I küstahlığı kullanmak)

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

DÜZENLEME:

doğrudan Çalışıyor

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

kullanırsanız, ancak

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

çalışmıyor. Aynı

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

Answer 1

Sorun, collapse'u da gruplamamalısınız.Aynı nedenle size data-toggle="my-collapse"

bu deneyin kullanamazsınız:

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

Ve gezinme çubuğu

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

Answer 2

Evet haklısınız olmalıdır Ama-navbar-çöküş böyle tanımlanır, önyükleme navbar mobil varsayılan olarak daraltılmış. Aynı genişlemeleri tıkladığınızda bir Hamburger simgesi & görünecektir.

Bunun üstesinden gelmek için folching özelliğini bir medya sorgusuna my-navbar-collapse sınıfına ekleyin. Bunu ister dp olabilir

aşağıdaki gibidir:

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

ekran genişliği lessthan ya da 2 sorun için 640px

eşit kadar bu kod ya gerek, navbar genişletilmiş görünür & işleri bir $ scope.go [olan kötü bir yol] ('uRL') yoksa bu sayfaya bakın whihc kullanıcı aynı sorunu

Angularjs - refresh when clicked on link with actual url

bakıyordu olan her url için bir işlev yapmak

Umarım bu, sorununuzu çözmenize yardımcı olur.