Связывание хэшей с маршрутизацией - устранение неполадок `$ anchorScroll`

Примечание. Я до сих пор не решил этого. Это сообщение, похоже, описывает решение моей проблемы, так как я использую ngRoute и я использую более новую версию Angular, но я не мог заставить ее работать: qaru.site/info/19774/...

В моем приложении для одной страницы: https://kylevassella.github.io/
Я пытаюсь связать свои кнопки навигации с хэш-ссылками на другом представлении. Я использовал принятый ответ здесь для справки: Как обрабатывать привязку привязки привязки в AngularJS

Но у меня возникли проблемы с реализацией ($anchorScroll) на моем сайте.

Чтобы узнать, о чем я говорю:

  • My Plunker: https://plnkr.co/edit/fgTG7j?p=info Сделать окно предварительного просмотра достаточно широким, чтобы навигационное меню ( "Контакт с домашним портфолио" ) отображается вверху.

  • Прокрутка вниз   в "Проекты" нажмите "Проект 1. Это открывает новый вид &    ng-show позволяет использовать другую навигационную панель (которая выглядит так же, как и   старый. Посмотрите ниже <section ng-show="showPortfolioHeader"> в   index.html для этих навигационных якорей).

  • Отсюда я хочу   'Портфолио и' Контакт для ссылки на #portfolio и #contact   hash link ID в моем представлении views/home.html. Но они меня берут   на правильный маршрут (views/home.html), а не на соответствующие   точки прокрутки на странице.
    ПРИМЕЧАНИЕ. В Plunker они даже не ссылаются на правильный маршрут, они приносят мне 404. Это не проблема - на моей локальной машине эта часть работает нормально. Моя проблема заключается в том, что как только я дойду до представления views/home.html, браузер не будет прокручиваться по ссылке hash.

ОТВЕТЫ

Ответ 1

Изменить: Я искал все это неправильно.

Вы никогда не меняете маршрут, поэтому ваш скроллер не работает.

Ваше начальное меню захватывается обычным материалом anchorScroll.

Но когда вы позже скроете этот и "покажете портфолио портфолио", вы связываетесь с вещами, которые не являются новыми маршрутами. <a href="/?scrollTo=contact"> по-прежнему является маршрутом /, он просто имеет некоторые параметры. Таким образом, ваш маршрут никогда не изменяется, и ваш маршрутизатор не реагирует.

Не вдаваясь в подробности того, почему у вас разные меню, я бы сказал, что в заголовке портфеля вам будет лучше использовать ng-click вместо href там и программно прокрутить прокрутку.

Или еще лучше, просто объедините два меню, они кажутся достаточно похожими. Просто покажите-скройте контейнер героя, а не все меню.

Если я правильно понял вопрос, это ваша проблема:

href="/?scrollTo=contact"

Измените это на

href="#/?scrollTo=contact"

И ваш scrollTo работает. Это потому, что если ваш браузер (например, Chrome) видит href с /?scrollTo=contact, он говорит: "Ах, реальная ссылка! К / (или index.html). Он перемещается сразу, не давая JavaScript (и angular) время работы.

Но когда вы добавляете # перед ссылкой, браузер не перемещается, он знает, что он должен оставаться на одной странице, просто другой якорь. И теперь это дает Angular время, чтобы поймать ваш клик и работать с ним.

В качестве побочного примечания: поскольку ваша локальная среда-разработчик, вероятно, перенаправляет все, что не соответствует index.html, это почему эта часть работ локально - на плунтере она пытается перейти на домашнюю страницу с этой ссылкой, но они не пусть это даст вам 404.

Забастовкa >

Ответ 2

Привет я не знаю, если вы решите это, но это то, что я сделал, и это сработало для меня :)

<a ng-click="scrollTo($event, id)">dasdsa</>
<div id="id"></div>
/// ctrller
$scope.scrollTo = function(event, id){
   event.preventDefault();
   var old = $location.hash();
   $anchorScroll();
   $location.hash(old);
}