angularjs - 如果我的 url 包含路由参数，则哈希链接会以 Angular 重新路由

Question

如果我有一个一级路由，那么哈希链接将按预期工作，无需重新路由。但是，我有一些国家/地区/kh 的网址，如果我尝试使用诸如国家/地区/kh#projects 之类的哈希标签，页面会重新路由，这非常烦人。

因此，如果我在页面国家/地区并单击链接#developmenting，则页面将滚动到#developmenting，而无需重新路由，这是所期望的。如果我在“country/kh”页面上单击“#projects”，该页面将重新路由，然后滚动到“#projects”；我不希望发生重新路由。

此问题仅发生在 page1/parameter#anchor 性质的链接上，不会发生在简单的 pageA#anchor 上。

Answer 1

如果没有任何代码示例或笨蛋，很难回答您的问题。我实现了一个 plunker 代码 ( http://plnkr.co/edit/oflB21?p=preview ) 来尝试重现此问题，但如您所见，我无法重现此问题。即您可以轻松地在页面的两个不同部分之间来回导航，例如在 #/Country/Italy#Section-4 和 #/Country/Italy#Section-1 之间，无需任何页面加载或重新路由。请在下面的 plunker 中查看我的工作示例。这很可能是由于缺少哈希符号或正斜杠或类似的细节而发生在您身上。

主页的 HTML 片段:

<ul>
    <li><a href="#/Country">Go to /Country</a></li>
    <li><a href="#/Country/US">Go to /Country/US</a></li>
    <li><a href="#/Country/Italy#Section-4">Go to /Country/Italy#Section-4</a></li>
    <li><a href="#/Country/Canada#Section-8">Go to /Country/Canada#Section-8</a></li>
</ul>

国家/地区页面的 HTML 片段:

<div id="Section-1" class="section pink">
    Section 1
    <div ng-if="country">
        <a ng-href="#/Country/{{country}}#Section-8">Go to /Country/{{country}}#Section-8</a>
    </div>
    <div ng-if="!country">
        <a ng-href="#/Country#Section-8">Go to /Country#Section-8</a>
    </div>
</div>

所有 JavaScript 代码:

var app = angular.module("app", ["ngRoute"]);

app.config(["$routeProvider", "$locationProvider", 
    function ($routeProvider, $locationProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "./home-page.html",
        caseInsensitiveMatch: true,
    })
    .when("/Home", {
        templateUrl: "./home-page.html",
        caseInsensitiveMatch: true,
    })
    .when("/Country", {
        templateUrl: "./country-page.html",
        caseInsensitiveMatch: true,
    })
    .when("/Country/:country", {
        templateUrl: "./country-page.html",
        caseInsensitiveMatch: true,
    })
}]);

countryController.$inject = ["$scope", "$routeParams", "$location", "$anchorScroll"];
function countryController($scope, $routeParams, $location, $anchorScroll) {

    $scope.country = $routeParams.country;

    if (!!$location.$$hash) {
        $location.hash($location.$$hash);
        $anchorScroll();
    }
}