बूटस्ट्रैप 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 पेज में im, मैं profile एनएवी टैब पर क्लिक करके पेज को ताज़ा करना चाहते हैं, लेकिन लिंक पर क्लिक नहीं किया । मुझे इसे क्लिक करने योग्य बनाना है। नेवबार के लिए

सीएसएस (मैं सास का उपयोग)

.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

हाँ तुम ठीक कह रहे हो सकता है, बूटस्ट्रैप नेवबार मोबाइल में डिफ़ॉल्ट रूप से संक्षिप्त है। और जब आप उस पर क्लिक करते हैं तो एक हैम्बर्गर आइकन & दिखाई देगा।

इस पर काबू पाने के लिए मेरी-navbar-collapse क्लास मीडिया क्वेरी में क्लाउडिंग गुण जोड़ें।

आप इसे पसंद कर सकते हैं dp इस प्रकार है:

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

इस कोड काम करता है & नेवबार विस्तार दिखाई देगा जब तक स्क्रीन की चौड़ाई lessthan है या 640px

के बराबर अपने 2 समस्या के लिए, आप या तो करने की जरूरत है प्रत्येक यूआरएल जो एक $ scope.go ('url') [है जो एक बुरी तरह से] वरना यह पृष्ठ देखें whihc में उपयोगकर्ता एक ही समस्या

Angularjs - refresh when clicked on link with actual url

का सामना करना पड़ रहा था है के लिए एक समारोह बनाने

मुझे आशा है कि यह आपकी समस्या का समाधान करने में आपकी सहायता करेगा।