"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页面中,我想通过单击配置文件导航选项卡刷新页面,但链接不可点击.我需要让它可点击.

导航栏的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;
  }