2015-07-13 160 views
5

我使用角度自定義指令來實現啓動導航欄。這裏是我的代碼:bootstrap導航欄幾個錯誤

"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. 比方說IM在/profile頁,我想通過點擊profile導航選項卡上刷新頁面,但鏈接無法點擊。我需要讓它可點擊。

CSS的導航欄(我用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 
    } 
    } 
} 

編輯:

如果我直接用

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

它的工作,但

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

它無法正常工作。 但我-導航欄崩潰這樣定義,它應該是相同的

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

回答

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"> 
+0

哇它的工作?你能解釋更多嗎?爲什麼'崩潰'特別? – OMGPOP

0

是的,你說得對,引導導航欄默認情況下,在移動崩潰了。當你點擊它時,漢堡圖標將會出現&。

要解決此問題,請在媒體查詢中將以下屬性添加到my-navbar-collapse類中。

可以dp的它像如下:

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

此代碼工作&導航欄會出現膨脹,直到屏幕寬度爲每種不超過或等於640像素,

爲了您的第二個問題,您可能需要爲每個具有$ scope.go('url')[這是一種糟糕的方式]的url創建一個函數,或者在用戶面臨同樣的問題時引用此頁面

Angularjs - refresh when clicked on link with actual url

我希望這可以幫助您解決您的問題。

+0

從W3Schools的示例代碼是在默認情況下崩潰。我的代碼默認擴展。這就是問題 – OMGPOP

+0

你可以在這裏發佈你的CSS,問題是在css –

+0

我更新了我的問題 – OMGPOP