2015-04-20 2 views
6

Я использую AngularJS (MEAN.io stack), и я получаю раздражающий сбой, связанный с прокруткой.Прокрутка всегда сверху в AngularJS

Когда пользователь нажимает на ссылку, целевая страница занимает ту же позицию прокрутки, что и исходная страница, вместо того, чтобы оставаться на вершине.

Для приклеивания это странное поведение, я использовал следующий:

$rootScope.$on("$viewContentLoaded", function() { 
    $anchorScroll(); 
}); 

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

Любое предложение? Как я могу получить желаемый результат?

Спасибо!

Редактировать --------------------

Когда я пытался использовать нг ракурс + автопрокрутки решение, оно не работает я и я не знаю почему.

Это путь, я использую его, в моей странице default.html, который обслуживается сервером:

<body ng-cloak class="ng-cloak" ng-class="{state: true, auth: authPage}" ng-controller="BodyController"> 

     <div ng-include="'/system/views/header.html'"></div> 

    <section class="content"> 
     <div data-ng-include="'/ceh-admin/views/adminShortcuts.html'"></div> 
     <div ng-view autoscroll="true">{% block content %}{% endblock %}</div> 
    </section> 

    <div data-ng-include="'/system/views/footer.html'"></div> 

    {% include '../includes/foot.html' %} 

    </body> 

что-то странное в моем HTML-коде?

ответ

0

В соответствии с ngView documentation вам необходимо объявить, как вы хотите, чтобы прокрутка обрабатывалась.

автопрокрутка (опционально) строка ли ngView должна вызвать $ anchorScroll для прокрутки окна просмотра после того, как вид обновляется.

  • Если атрибут не установлен, отключите прокрутку.
  • Если атрибут установлен без значения, включите прокрутку.
  • В противном случае разрешить прокрутку, только если значение атрибута autoscroll, оцененное как выражение, дает правдивое значение.

она отключена по умолчанию, так что вам нужно будет добавить следующее к разметке:

<div ng-view autoscroll></div> 

или (в соответствии с Документами и в зависимости от ваших предпочтений):

<div ng-view autoscroll="true"></div> 
+0

Похоже, что не работает для меня тоже. Я отредактировал основную тему, показывающую, как я ее использую. Вы видите что-то странное? –

+0

Получите какие-либо ошибки консоли? Если вы добавили/удалили автопрокрутку здесь (http: // jsfiddle.net/dL76co2r /) вы можете увидеть, как он должен работать? Ваша разметка не выглядит проблематичной. – RichieAHB

0

Я не лучший с угловыми js, но у меня возникла аналогичная проблема, и я исправил ее, используя следующий код:

<div data-ng-view data-autoscroll="true"></div> 

вы можете посмотреть документацию здесь: angular doc

Я надеюсь, что это помогает

+0

Да, спасибо за помощь, но пока это решение не работает для меня. Отредактированная основная тема, показывающая, как я использую автопрокрутку. –

+0

@ RubénJiménez Какая версия для Angular вы используете? любая консольная ошибка? – gon250

Смежные вопросы