javascript - AngularJS 路由和 anchor 哈希

Question

我们在过去一年左右的时间里创建了一个 Angular 应用程序，直到现在我们从未使用过路由。现在我们已经在我们的一些页面中尝试过它，我们喜欢模板的动态加载和响应时间。

我们唯一的问题是许多页面都有类似 <a href="#selectedTab"> 的链接.在某些地方， anchor 元素仅表示当前选择了哪个选项卡，而在其他地方，它实际上导航到特定内容。

添加如下路由代码后

<script type="text/javascript">
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider) {
    $routeProvider
    .when('/page1', {
        templateUrl: '/ctx/page1.jsp',
        controller: 'page1Controller'
    }).when('/page2', {
        templateUrl: 'page2',
        controller: 'page2Controller'
    }).otherwise({
        redirectTo:'/' //what can I write here for normal # behavior
    });
});

我们所有正常的导航 anchor 自然不起作用。有没有办法在 otherwise 中编写一些代码？忽略某些 anchor 的子句？我已经读过 How to handle anchor hash linking in AngularJS但它假设用户正在创建一个新的应用程序并且有解决方法。还有 target="_self"属性解决了它，但我将不得不检查我所有的 <a>标签以删除至少 4 位数字的“#”。

谢谢

Answer 1

更新:

您的 html 中是否有基本 href？

例如

<base href="/" />

你可以试试吗

$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');

---

将 target="_self"添加到您的 anchor 链接。这可以防止 AngularJS 重写 URL。参见 This answer on stack overflow和 this discussion