Прокрутите список до угловых

Я пытаюсь перейти к элементу на странице после того, как я его покажу. И.Е. У меня очень длинный список пользователей, и я показываю их как список. У каждого элемента есть значок редактирования, который вы можете щелкнуть. При щелчке я показываю форму пользователя, которая находится в верхней части страницы. Затем я хочу прокрутить до этого места.

  // helper method to scroll
  $scope.scrollTo = function (id) {
    $location.hash(id);
    $anchorScroll();
  }

При щелчке правой кнопкой мыши:

  $scope.editUser = function (user) {
    $scope.user = user; // set user
    $scope.setShowUserForm(true); // show edit form
    $scope.scrollTo('admin-form'); // scroll to the form
  }

Это отлично работает, за исключением первого раза. Я проверил DOM, и мой элемент "user-form" находится в DOM, но скрыт, и это то, что я хочу. Когда я нажимаю на пользователя редактирования, первый раз прокрутка не работает. После первого раза все терпит неудачу. Я не уверен, что изменилось.

Я также установил форму для отображения по умолчанию, чтобы я знал, что это было в DOM и видимо в первый раз, когда я нажму кнопку "Редактировать". Это тоже не решило мою проблему. Так ли это в DOM или нет, скрытый или не первый прокрутки до отказа.

Любая идея, что я делаю неправильно?

Edit:

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

/#/Главный /#/Админ

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

<div id="admin-form">
...
</div>

Проблема в том, что я использую angular для прокрутки, меняет свой url на:

/#/# админ админ-форма

Когда это происходит, он, кажется, попадает в контроллер маршрута и перезагружает мою страницу администратора, поэтому свиток не происходит. когда я нахожусь в URL-адресе/#/admin # admin-form, прокрутка работает, потому что angular не видит изменения в моем маршруте и не перезагружает страницу. Но если я верну свой url обратно в /#/admin и нажмите кнопку, которая выполняет прокрутку до angular, снова изменит URL-адрес на /#/admin # admin-form.

Я уверен, что это так, как ожидалось, но я понятия не имею, как это исправить. Или если я могу.

Ответ 1

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

Прокрутка, а затем сброс $location.hash(), поэтому angular не воспринимает изменение URL-адреса, похоже, работает.

 $scope.scrollTo = function (id) {
    var old = $location.hash();
    $location.hash(id);
    $anchorScroll();
    $location.hash(old);
  }

Edit

Как упоминалось в комментарии от @theunexpected1, поскольку 1.4.0, angular $anchorScroll позволяет вам напрямую передавать идентификатор в качестве параметра без необходимости обновления URL-адреса с помощью хэша:

$scope.scrollTo = function(id) {

  // Pass the 'id' as the parameter here, the page will scroll 
  // to the correct place and the URL will remain intact.
  $anchorScroll(id);
}

Ответ 2

Я обнаружил, что если бы мне захотелось прокрутиться к определенному элементу, меня не интересовало обновление URL-адреса, чтобы показать, к какому идентификатору я собирался (например, # admin-form id в www.something.com/#admin- форма)

Итак, чтобы прокручивать без обновления URL-адреса, я обнаружил, что вы можете просто вызвать anchorscroll, не требуя обновления хэша местоположения.

$anchorScroll('admin-form');

Ответ 3

Для справки в будущем - и любой, кто пришел сюда с той же проблемой прокрутки, но не использует ng-маршруты для прокрутки, ответ @Ben_Lesh на самом деле довольно проницателен.

Я использовал

$location.hash(id)
$anchorScroll()

чтобы прокручивать, но также сталкивается с той же проблемой, что и первый клик, который не работает. Я понял, что проблема в том, что мой первый щелчок установить объект видимый, а затем попытался прокручивать его, но во время прокрутки элемент по-прежнему был не отображается на странице. Затем в конце цикла страница повторно отображается.

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

Решение состоит в том, что после того, как вы установите логическое значение, которое делает ваш элемент видимым, для вызова

$timeout (function() {$ scope. $apply()}, 0)

, затем вызовите функцию прокрутки. Таким образом вы принудительно перенаправляете перед прокруткой. Вуаля!

Ответ 4

вы разместили вопрос об этом в моем блоге, а также в комментариях.

Не смотря на весь ваш код, я могу только догадываться об этом, но могу сказать вам несколько вещей, которые могут помочь:

вы не можете перейти к скрытому элементу.
Фактическая прокрутка выполняется с помощью $watch, который устанавливается $anchorScroll, который обрабатывается во время $digest.
Независимо от того, что вы настраиваете, чтобы показать/скрыть этот элемент формы, также обрабатывается в $watch в $digest.

Поэтому мне кажется, что он пытается обработать прокрутку, прежде чем обрабатывать значение, чтобы показать форму. Чтобы исправить это, я попробую либо реорганизовать код, который вы используете, чтобы показать форму, либо обернуть вызов $anchorScroll в $timeout, чтобы убедиться, что он вызван после показа.

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

Ответ 5

Я создал планку, чтобы показать эту проблему. Обратите внимание, как вам нужно дважды щелкнуть кнопку, чтобы сообщение появилось?

http://plnkr.co/edit/oU3REYC2upvlPMc5ipBp?p=preview