Если в моем URL-адресе содержатся параметры маршрута, перенаправление хеш-ссылок в angular

Если у меня есть маршрут на один уровень, хеш-ссылки работают так, как ожидалось, без перенаправления. Однако у меня есть некоторые URL-адреса, которые являются country/kh, и если я пытаюсь использовать теги хэша, такие как country/kh # projects, перенаправления страниц, что очень раздражает.

Итак, если im на странице стран и нажмите ссылку #developing, тогда страница будет прокручиваться до #developing без перенаправления, что желательно. Если я на странице country/kh, и я нажимаю #projects, страница будет перенаправлена, затем прокрутите до #projects; Я не хочу, чтобы произошел перенаправление.

Проблема возникает только для ссылок на природу page1/параметр # anchor, а не для простого привязки pageA #.

ОТВЕТЫ

Ответ 1

Очень сложно ответить на ваш вопрос без каких-либо образцов кода или плунжера. Я применил код плункера (http://plnkr.co/edit/oflB21?p=preview), чтобы попытаться воспроизвести эту проблему, но, как вы можете видеть, я не смог воспроизвести проблему. т.е. вы можете легко перемещаться между двумя разными разделами страницы, например. между #/Country/Italy # Section-4 и #/Country/Italy # Section-1, без загрузки или перенаправления страницы. Посмотрите мой рабочий пример на следующем плунжере. Это, скорее всего, происходит с вами из-за отсутствия хэш-сигнала или косой черты или таких деталей.

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

Ответ 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, если вам нужно увидеть его в действии

Ответ 3

Там мертвое простое решение вашей проблемы...

Вместо этого:

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

Просто сделай

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

Я подозреваю, что причиной неожиданного поведения является ошибка/особенность любого используемого вами решения маршрутизации (т.е. встроенный маршрутизатор angular или ui-router или что-то еще). ui-router имеет способ отключить повторную маршрутизацию при переходе на тот же маршрут...

Ответ 4

Я думаю, что у меня была та же проблема, что и у вас.

Вот как я это сделал с моей страницей github, http://ngmap.github.io.

Th сайт, http://ngmap.github.io, имеет много страниц, и на каждой странице много якорей, все якоря закодированы естественным образом.

Без следующего кода http://ngmap.github.io/javascripts/app.js, когда вы нажимаете якорь на своей странице,

  • он устанавливает $location.path для /anchor. i.el 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

Единственное, что вам может не понравиться, это URL. Он выглядит немного грязным, но я не возражал.

то есть. Http:/ngmap.github.io/basics.html#/map-geolocation#map-geolocation

Надеюсь, что это поможет