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

Question

Примечание: Я до сих пор не решил это. Это сообщение, кажется, описывает решение моей проблемы, поскольку я использую ngRoute и я на новой версии Угловая, но я не мог заставить ее работать решение: https://stackoverflow.com/a/35028895/6647188

На моем одном приложении страницы: https://kylevassella.github.io/
Я пытаюсь связать свои кнопки навигации с хэш-ссылками на другом представлении. Я воспользовался принятым ответом здесь: How to handle anchor hash linking in AngularJS

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

Чтобы увидеть, что я говорю о:

1. Мой Plunker: https://plnkr.co/edit/fgTG7j?p=infoсделать окно предварительного просмотра достаточно широки, так что меню навигации («Home Портфолио Контакты») появляется в верхней части.
   

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

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

Answer 1

Edit: Я смотрел в это неправильно всем пути.

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

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

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

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

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

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

href="/?scrollTo=contact" 

Изменить что

href="#/?scrollTo=contact" 

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

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

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