angularjs 단위로 스크롤

angularjs 단위로 스크롤

페이지를 '표시'한 후 해당 페이지로 스크롤하려고 합니다. 즉, 사용자 목록이 매우 길어서 목록으로 표시합니다.각 요소에는 클릭할 수 있는 편집 아이콘이 있습니다.클릭하면 페이지 맨 위에 있는 사용자 폼이 표시됩니다.그런 다음 해당 위치로 스크롤합니다.

  // 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을 확인했더니 DOM에 '사용자 양식' 요소가 있지만 숨겨져 있습니다.처음 편집 사용자를 클릭하면 스크롤이 작동하지 않습니다.처음 실패했을 때는 모든 것이 정상입니다.뭐가 바뀌었는지 모르겠어요.

또, 디폴트로 표시되도록 폼을 설정해, DOM 에 있는 것을 알고, 「편집」을 처음 클릭했을 때에 표시됩니다.그것 역시 나의 문제를 해결하지 못했다.따라서 DOM에 있는지 여부에 관계없이 첫 번째 스크롤은 실패합니다.

내가 뭘 잘못하고 있는지 알기나 해?

편집:

무슨 일인지 알 것 같은데 어떻게 해결해야 할지 모르겠어요.어플리케이션에서 루팅을 사용하고 있습니다.다음과 같은 루트가 있습니다.

/#/메인 /#/admin

스크롤을 사용하고 있는 관리 페이지에서 문제가 발생하고 있습니다.스크롤처의 html은 다음과 같습니다.

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

문제는 angular를 사용하여 스크롤하면 URL이 다음과 같이 변경된다는 것입니다.

/#/admin#admin폼

이 경우 루트 컨트롤러에 접속하여 관리 페이지를 새로고침할 수 있기 때문에 스크롤이 실행되지 않습니다./#/admin#admin-form url에 들어가면 angular는 루트의 변경을 인식하지 않고 페이지를 새로고침하지 않기 때문에 스크롤이 기능합니다.단, URL을 /#/admin으로 되돌리고 스크롤을 실행하는 버튼을 다시 클릭하면 URL이 /#/admin#admin-form으로 변경됩니다.

예상대로겠지만 어떻게 고쳐야 할지 모르겠어요.아니면 할 수 있다면.

Angulars routing은 변경을 받아들이는 것 같습니다.이 경우 스크롤 투가 메인 관리 페이지로 돌아가도록 재루팅하기 때문에 좋지 않습니다.

$location.hash()를 스크롤한 후 url의 변화를 인식하지 않도록 리셋하면 효과가 있는 것 같습니다.

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

편집:

@the unexpected1의 코멘트에 기재되어 있듯이 이후1.4.0, Angular의$anchorScroll를 사용하면 해시를 사용하여 URL을 갱신할 필요 없이 id를 파라미터로 직접 전달할 수 있습니다.

$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);
}

특정 요소로 스크롤할 경우 어떤 ID를 표시하기 위해 URL을 갱신할 필요가 없습니다(예: www.something.com/#admin-form의 #admin-form id).

따라서 URL을 업데이트하지 않고 스크롤하려면 위치 해시를 업데이트하지 않고 anchorscroll을 호출하면 됩니다.

$anchorScroll('admin-form');

나중에 참조할 수 있도록 - 스크롤에 관한 같은 문제를 안고 왔지만 스크롤에 ng-routes를 사용하지 않는 사람이라면 @Ben_Lesh의 답변은 매우 통찰력이 있습니다.

사용하고 있었습니다.

$location.hash(id)
$anchorScroll()

첫 번째 클릭이 작동하지 않는 것과 같은 문제가 발생합니다.첫 번째 클릭으로 오브젝트가 표시되도록 설정하고 스크롤을 시도했지만 스크롤할 때 아직 페이지에 요소가 표시되지 않는 것이 문제라는 것을 깨달았습니다.그런 다음 사이클이 끝나면 페이지가 다시 렌더링됩니다.

두 번째로 클릭하면 요소가 표시되도록 설정되므로 스크롤은 정상적으로 작동합니다.

해결책은 요소를 표시하기 위한 부울을 설정한 후 콜을 호출하는 것입니다.

$syslog(function() {$syslog}).$syslog()},0)

스크롤 기능을 호출합니다.이렇게 하면 스크롤 전에 렌더를 강제로 다시 렌더링할 수 있습니다.보일라!

저는 이 문제를 과시하기 위해 플렁크를 만들었습니다.메시지가 나타나려면 버튼을 두 번 클릭해야 합니다.

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

제 블로그에도 댓글로 올려주셨어요.

코드를 모두 보지 않고 추측만 할 수 있지만 도움이 될 만한 몇 가지 사항을 알려드리겠습니다.

1. 숨겨진 요소로 스크롤할 수 없습니다.
2. 실제 스크롤은 $anchorScroll에 의해 설정된 $watch에 의해 수행되며 $digest 중에 처리됩니다.
3. 폼 요소를 표시/숨기기 위해 설정하는 모든 것이 $watch로 $digest로 처리됩니다.

따라서 폼을 표시하기 위해 값을 처리하기 전에 스크롤을 처리하려고 하는 것처럼 보입니다.이 문제를 해결하려면 폼을 표시하기 위해 사용하고 있는 코드를 리팩터링하거나 $anchorScroll 콜을 $타임아웃으로 랩하여 쇼 시청 후 확실하게 처리하도록 하겠습니다.

도움이 됐으면 좋겠어요.

언급URL : https://stackoverflow.com/questions/17711232/scroll-to-in-angularjs