如果我的 url 包含路由参数，则哈希链接以角度重新路由

Question

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

因此，如果我在页面国家/地区并单击链接#developing，则页面将滚动到#developing 而无需重新路由，这是理想的。如果我在页面 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 sn-p：

<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 sn-p：

<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();
    }
}

Answer 2

好吧，我认为主要问题是 Angular 使用哈希处理路由（有时）。您需要做的是使用$anchorScroll 服务。所以你的 JS 看起来像这样：

function ScrollCtrl($scope, $location, $anchorScroll) {
  $scope.gotoBottom = function (){
    // set the location.hash to the id of
    // the element you wish to scroll to.
    $location.hash('bottom');

    // call $anchorScroll()
    $anchorScroll();
  };
}

然后你的 HTML 可能是：

<div id="scrollArea" ng-controller="ScrollCtrl">
  <a ng-click="gotoBottom()">Go to bottom</a>
  <a id="bottom"></a> You're at the bottom!
</div>

http://plnkr.co/edit/De6bBrkHpojgAbEvHszu?p=preview - 这是一个 plunkr（不是我的），如果您需要查看它的实际操作，演示如何使用 $anchorScroll

Answer 3

你的问题有一个简单的解决方案......

而不是做：

    <a href="page1/parameter#anchor">go</a>

做事

    <a href="#anchor">go</a>

我怀疑意外行为的原因是您正在使用的任何路由解决方案的错误/功能（即内置的角度路由器或 ui-router 或其他）。 ui-router 有一种方法可以在去同一条路线时禁用重新路由...

Answer 4

我想我遇到了和你一样的问题。

这就是我在我的 github 页面 http://ngmap.github.io 上所做的。

网站http://ngmap.github.io有很多页面，每个页面都有很多锚点，所有锚点都是自然编码的。

没有http://ngmap.github.io/javascripts/app.js下面的代码，当你点击页面中的锚点时；

• 它将$location.path 设置为/anchor。即http://url.com/#anchor
• 并将 $location.hash 设置为 ``.

这种行为会阻止页面向下滚动到散列，因为 url 中根本没有散列。

只需添加 $location.hash 并向下滚动到该锚点，一切都应该正常。

 /**
   * when the location is changed, scroll the page to the proper element.
   * by changing location hash from '' to 'hash', so that it can be used as $anchorScroll
   */
  $rootScope.$on('$locationChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($location.path().replace(/^\//,"")); 
    $anchorScroll();  
  });

有了上面的代码，

• $location.path 保持不变，/anchor
• $location.hash 现在变成anchor

您可能唯一不喜欢的是网址。它看起来有点脏，但我不介意。

即http://ngmap.github.io/basics.html#/map-geolocation#map-geolocation

希望对你有帮助