$location.hash() 疑难解答

Question

所以我想要一个导航栏来控制位置并且只显示可见的页面。有点像默认的“office”引导示例，但隐藏了不可见且不滑动的部分。我想我会在 Angular 中做一个例子，因为我需要在导航栏中使用服务回调挂钩一些东西......但首先是基础知识。

非常简单，我希望导航控制器读取哈希以确定哪个选项卡可见，然后当我单击不同的链接时，我希望它更新哈希以匹配。

一个真正简单的控制器并禁用自动点击功能：

$(document).ready(function() {
    $(".navbar a").on('click', function(event) {
        // Prevent default anchor click behavior
        event.preventDefault();
    });
});

app.controller('NavCtrl', [ "$scope", "$location", function($scope, $location) {
    $scope.activeTab = "home";

    console.log("hash: " + $location.hash());

    $scope.setActiveTab = function(t) {
        $scope.activeTab = t;
        $location.hash(t);
    };

    $scope.isActiveTab = function(t) {
        return $scope.activeTab == t;
    };
} ]);

然后，我们想要一个导航栏：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#home" data-ng-click="setActiveTab('')"> <span class="glyphicon glyphicon-fire"></span> <span class="visible-xs size-indicator">XS</span> <span class="visible-sm size-indicator">SM</span> <span class="visible-md size-indicator">MD</span> <span class="visible-lg size-indicator">LG</span>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li data-ng-class="{active:isActiveTab('about')}"><a href="#about" data-ng-click="setActiveTab('about')">ABOUT</a></li>
                <li data-ng-class="{active:isActiveTab('contact')}"><a href="#contact" data-ng-click="setActiveTab('contact')">CONTACT</a></li>
                <li data-ng-class="{active:isActiveTab('profile')}"><a href="#profile" data-ng-click="setActiveTab('profile')"> <span data-ng-hide="imgsrc.length>0" class="profile-icon glyphicon glyphicon-user"></span> <span data-ng-hide="imgsrc.length==0"> <img class="profile-icon img-circle" data-ng-hide="imgsrc.length==0" data-ng-src="{{imgsrc}}" />
                    </span>
                </a></li>
            </ul>
        </div>
    </div>
</nav>

当我转到带有http://server/#about 的页面时，该页面立即将其重写为http://server/#/about，并且控制台日志显示一个空白哈希。没有什么应该将哈希重写为#/whatever。

我错过了什么？？？

编辑

我还根据答案之一尝试了启用 HTML5 的模式。虽然它对 URL 的填充较少，但它会进行路由，但仍然无法按我的需要工作。

var app = angular.module("myApp", []);
app.config(function($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false,
        rewriteLinks: false
    });
});

这似乎在 bootstrap office 演示模板中运行良好，但我似乎无法取消选择它。

编辑 2

如果您执行http://server/##about，所有导航似乎都可以正常工作。也许它有点坏了，因为我身上有 ng-app 标签？

Answer 1

如this question中所说，您需要激活HTML5模式，它应该停止在开头添加'/'：

angular.module('moduleName').config(function($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false,
        rewriteLinks: false
    });
})