如果我的url包含路由参数，那么散列链接将以角度重新路由

If I have a one level route, then the hash links work as expected with no rerouting. However I have some urls that are country/kh and if I try using hash tags such as country/kh#projects, the page reroutes, which is very annoying.

如果我有一个级别的路由，那么散列链接就会像预期的那样工作，没有重新路由。但是，我有一些url是country/kh，如果我尝试使用诸如country/kh#projects之类的散列标签，页面会重新运行，这很烦人。

So, if im on page countries and click the link #developing, then the page will scroll to #developing without rerouting, which is desired. If I'm on page country/kh and I click #projects, the page will reroute, then scroll to #projects; I don't want the rerouting to occur.

因此，如果im在页面国家并且点击链接#developing，那么页面将滚动到#developing而不重新路由，这是需要的。如果我在页面country/kh，我点击#projects，页面会重新显示，然后滚动到#projects;我不希望重播发生。

The issue only occurs for links of the nature page1/parameter#anchor, not for simple pageA#anchor.

问题只发生在自然page1/parameter#anchor的链接上，而不是简单的pageA#anchor上。

4 个解决方案

#1

It is very difficult to answer your question without any code samples or a plunker. I implemented a plunker code ( http://plnkr.co/edit/oflB21?p=preview ) to try to reproduce this issue but as you can see I could not reproduce the issue. i.e. You can easily navigate back and forth between two different sections of the page, e.g. between #/Country/Italy#Section-4 and #/Country/Italy#Section-1, without any page load or reroute. Please check out my working example at the following plunker. This most probably is happening to you due to a missing hash bang or forward slash or details like that.

如果没有代码示例或插入程序，很难回答您的问题。我实现了一个柱塞代码(http://plnkr.co/edit/oflB21?试着再现这个问题，但是你可以看到，我无法再现这个问题。例如，你可以很容易地在页面的两个不同部分之间来回导航，例如#/Country/Italy# sec- 4和#/Country/Italy# sec- 1之间，不需要任何页面加载或重新路由。请看看我下面的工作例子。这很可能是由于缺少散列爆炸或正斜杠或类似的细节而发生的。

HTML snippet for the home page:

主页的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 snippet for the country page:

国家页面的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>

All the JavaScript code:

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

#2

Alright, I believe the main issue is that Angular handles routing with hashes (sometimes). What you need to do is use the $anchorScroll service. So your JS would look something like:

好的，我认为主要的问题是角句柄使用散列(有时)进行路由。您需要做的是使用$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();
  };
}

And then your HTML could be:

然后你的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 - this is a plunkr (not mine) that demonstrates using $anchorScroll if you need to see it in action

http://plnkr.co/edit/De6bBrkHpojgAbEvHszu?p=preview——这是一个柱塞(不是我的)，如果你需要看到它的效果，可以使用$anchorScroll

#3

There's a dead-simply solution to your problem...

你的问题有一个死路一条的解决办法……

Instead of doing:

而不是做:

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

Just do

只做

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

I suspect the reason for the unexpected behavior is a bug/feature of whatever routing solution you are using (ie the built-in angular router, or ui-router or whatever). ui-router has a way to disable re-routing when going to the same route...

我怀疑造成这种意外行为的原因是您正在使用的任何路由解决方案的bug/特性(即内置的角路由器、ui-router或其他)。ui-router有一种方法可以在访问相同路由时禁用重路由……

#4

I think I had the same problem that you are having.

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

This is how I did it with my github page, http://ngmap.github.io.

这是我使用我的github页面http://ngmap.github.io的方式。

Th site, http://ngmap.github.io, has many pages and each page has lots of anchors, all anchors are coded naturally.

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

Without the following code of http://ngmap.github.io/javascripts/app.js, when you click an anchor in your page;

没有以下代码http://ngmap.github.io/javascripts/app。js，当你在你的页面点击一个锚;

it sets $location.path to /anchor. i.el http://url.com/#anchor
它集的位置。路径/锚。我。el http://url.com/锚
and it sets $location.hash to ``.
它集美元的位置。“散列。

This behaviour will prevent the page from scrolling down to the hash because simply there is no hash in the url.

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

By simply adding $location.hash and scrolling down to that anchor, all should work.

通过简单地增加美元的位置。哈希并向下滚动到锚点，所有这些都应该有效。

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

With the above code,

上面的代码,

$location.path remains the same, /anchor
美元的位置。路径保持不变，/锚点
$location.hash now becomes anchor
美元的位置。哈希现在变成锚

The only thing you may not like is, the url. It looks little dirty, but I did not mind.

你唯一可能不喜欢的是url。看起来有点脏，但我不介意。

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

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

Hope it helps

希望它能帮助

#1