Прокрутить вниз до angularjs

Question

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

// 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 и видимо в первый раз, когда я нажимаю edit. Это тоже не решило мою проблему. Так ли это в DOM или нет, скрытый или не первый прокрутка к неудаче.

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

Edit:

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

/#/главный /#/админ

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

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

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

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

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

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

Answer 1

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

Прокрутка, а затем сброс $ location.hash() настолько угловатая, что не кажется, что изменение в URL-адресе кажется сработавшим.

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

Edit:

Как уже упоминалось в комментарии от @ theunexpected1, так как 1.4.0, Угловое-х $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); 
} 

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

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

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

$location.hash(id) 
$anchorScroll() 

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

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

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

$ таймаут (функция() {$ объем. $ Применяется()}, 0)

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

Answer 5

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

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

$anchorScroll('admin-form');