Примечание. Я до сих пор не решил этого. Это сообщение, похоже, описывает решение моей проблемы, так как я использую 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);
}
