Question

所以我希望有一个控制位置的导航栏，只显示可见的页面。有点像默认的“office”bootstrap示例，但隐藏了不可见且不滑动的部分。我以为我会把它作为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
    });
})

$ location.hash（）问题排查

修改

编辑2

1 个答案: