我使用角度自定義指令來實現啓動導航欄。這裏是我的代碼: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個錯誤
(或可配置的默認?)在手機尺寸瀏覽器中,導航欄默認爲展開。不知道這是一個默認行爲,我認爲這不是大多數用戶希望
比方說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;
}
哇它的工作?你能解釋更多嗎?爲什麼'崩潰'特別? – OMGPOP