我使用 Angular 自定义指令来实现 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 个错误(或可配置的默认值?)
/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是这样定义的,应该是一样的
.my-navbar-collapse {
@extend .collapse;
@extend .navbar-collapse;
}
最佳答案
是的,你是对的,默认情况下, Bootstrap 导航栏在移动设备中是折叠的。并且会出现一个汉堡包图标,当您单击它时,它也会展开。
为了克服这个问题,将以下属性添加到 我的导航栏折叠 媒体查询中的类。
你可以像下面这样 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
我希望这可以帮助您解决问题。
关于angularjs - bootstrap navbar 几个错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31375085/