angularjs - bootstrap navbar 几个错误

Question

我使用 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;
  }

Answer 1

是的，你是对的，默认情况下， 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

我希望这可以帮助您解决问题。