Задать вопрос
VyacheslavPopov
@VyacheslavPopov
angular.js

AngularJS, как при пагинации возвращаться наверх странницы?

Структура
<body>
    <header>...</header>

    <ng-view></ng-view>

    <footer></footer>
</body>


страницы с пагинацией находится в ng-view
при скроле, внизу этой страницы
e627528e85cf45439e5e25840658a44a.jpg
находится пагинация
0f8184c808f74b4c8b7fae431c33f003.jpg
при переходе в пагинации на лист 2, положение просмотра от верха страницы(top) не меняется. Мне нужно возвращаться в top - скролом, самому.

Как при переходе на другую страницу в пагинации, автоматически возвращаться наверх? СПАСИБО
  • Вопрос задан
  • 3044 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 3
mudrick
@mudrick
Máximo progreso hemos alcanzado en minimo seso.
В самом главном контроллере слушайте изменения УРЛ страницы и крутите наверх:
$rootScope.$on('$routeChangeSuccess', function(e, current, previous) {
    window.scrollTo(0, 0);
});


UPD:
Если вы хотите сделать пагинацию на сайте вида mysite.ru/1, то в роутах у вас должно быть примерно следующее:
$routeProvider
     .when('/:pageNumber?', {
          templateUrl: 'partials/home.html',
          controller: 'HomeCtrl'
     })


В контроллере присоединяйте $routeParams, чтобы считывать переменные из роута, а так же присоединяйте paginationService, у него есть метод setCurrentPage, который задает текущую страницу:
watchesStore.controller('WatchesStoreController', function($routeParams, paginationService) {
    var pageNumber = $routeParams.pageNumber || 1;
        pageNumber = parseInt(page, 10);

    var paginationId = 'watchesStore'; // setCurrentPage требует instanceId — айдишку экземпляра пагинатора, чтобы знать, какой блок, собственно, пагинировать

    paginationService.setCurrentPage(paginationId, pageNumber);
});


А в HTML-коде у вас нужно еще айдишку экземпляра пагинации (мы его назвали watchesStore) вставить в директиву:
<dir-pagination-controls boundary-links="true" on-page-change="pageChangeHandler(newPageNumber)" template-url="dirPagination.tpl.html" pagination-id="watchesStore"></dir-pagination-controls>


UPD2:
А, только что заметил, что у вас уже есть роут для айдишки часов:
$routeProvider
    .when('/:watchId', {
        templateUrl: 'partials/watch-detail.html',
        controller: 'WatchDetailCtrl'
    })


Значит, для пагинации используйте не mysite.ru/1, а обычные GET-параметры mysite.ru/?page=1. В результате в контроллере страничку будете получать так:
watchesStore.controller('WatchesStoreController', function($location, paginationService) {
    var params = $location.search();

    var pageNumber = params.page || 1;
        pageNumber = parseInt(page, 10);

    ...
});
Ответ написан
3 комментария
3 комментария
miraage
@miraage
Старый прогер
Насколько я помню, есть такая конструкция:

DOCS

<ng-view autoscroll></ng-view>
Ответ написан
Комментировать
Комментировать
VyacheslavPopov
@VyacheslavPopov Автор вопроса
Использую такую схему

watchesStore.config(['$routeProvider', '$locationProvider',
	function($routeProvider, $locationProvider) {
		$locationProvider.html5Mode({
			enabled: true,
			requireBase: false
		})
		$routeProvider.
			when('/', {
				templateUrl: 'partials/home.html',
				controller: 'HomeCtrl'
			}).
			when('/service', {
				templateUrl: 'partials/service.html',
				controller: 'ServiceCtrl'
			}).
			when('/contacts', {
				templateUrl: 'partials/contacts.html',
				controller: 'ContactsCtrl'
			}).
			when('/:watchId', {
				templateUrl: 'partials/watch-detail.html',
				controller: 'WatchDetailCtrl'
			}).
			otherwise({
				redirectTo: '/'
			});
	}
]);
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Релиз-менеджер
Автомакон • Москва
от 28 200 ₽
Инженер DevOps
Автомакон • Москва
от 300 000 ₽
Data Engineer
Автомакон • Москва
от 250 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция бэкэнда с фронтендом и доработка (react + next + laravel)
24 нояб. 2024, в 20:45
42000 руб./за проект
Сверстать веб приложение на vue
24 нояб. 2024, в 19:46
1000 руб./в час
Стили/дизайн/верстка приложения на QT
24 нояб. 2024, в 19:43
30000 руб./за проект
Ещё заказы