Question

我使用angular custom指令来实现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 {
    @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

是的，你是对的，默认情况下，bootstrap导航栏在移动设备中折叠。然后会出现一个汉堡图标＆amp;当你点击它时，它会扩展。

要克服此问题，请在媒体查询中将以下属性添加到 my-navbar-collapse 类。

您可以点击如下：

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

此代码适用＆amp;导航栏将显示为扩展，直到屏幕宽度小于或等于640px

对于您的第二个问题，您需要为每个具有$ scope.go（＆＃39; url＆＃39;）[这是一种不好的方式]的网址创建一个函数，或者在whihc中引用此页面用户面临同样的问题

Angularjs - refresh when clicked on link with actual url

我希望这有助于您解决问题。

bootstrap navbar有几个错误

2 个答案: