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

Question

如果我有一个级别的路由,那么哈希链接按预期工作,没有重新路由.但是我有一些国家/地区的网址,如果我尝试使用hash/kh #project之类的哈希标签,页面重新路由,这非常烦人.

因此,如果我在页面国家/地区并单击#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代码段:

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

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（如果您需要查看它的实际效果）