angularjs로 스크롤

Question

'보여주기'후 페이지의 요소로 스크롤하려고합니다. I.E. 나는 아주 긴 사용자 목록을 가지고 있으며 목록으로 표시합니다. 각 요소에는 클릭 할 수있는 편집 아이콘이 있습니다. 클릭하면 페이지 맨 위에있는 사용자 양식이 표시됩니다. 그런 다음 그 위치로 스크롤하고 싶습니다. 편집 사용자가 클릭에

// 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 여부에 상관없이 숨겨진 또는 첫 번째 스크롤 실패합니다.

내가 뭘 잘못하고 있는지 알기!

편집 :

는 내가 무슨 일이 일어나고 있는지 알고 있다고 생각하지만 난 그것을 해결하는 방법을 모른다. 내 응용 프로그램에서 라우팅을 사용하고 있습니다.

/#/주 /#/관리자가 문제를 일으키는에 내가 스크롤을 사용하고

그것의 내 관리자 페이지 : 내가 좋아하는 경로를 가지고있다. 경우

/#/관리 번호 관리 형태

: 나는 내 URL을 변경 스크롤 각도 사용할 때

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

문제있다 : 여기로 스크롤 할 HTML입니다 그것이 루트 컨트롤러를 치고 스크롤이 발생하지 않는 이유 인 내 관리자 페이지를 다시로드하는 것처럼 보입니다. 일단/#/admin # admin-form url을 입력하면 각도가 내 경로의 변경 사항을 보지 못하고 페이지를 다시로드하지 않기 때문에 스크롤이 작동합니다. 하지만 내 URL을/#/admin으로 변경하고 각도로 스크롤하는 버튼을 클릭하면 URL이/#/admin # admin-form으로 다시 변경됩니다.

이것이 예상대로 나올 것이라고 확신하지만 어떻게 수정해야하는지 잘 모릅니다. 아니면 할 수 있다면.

Answer 1

Angulars 라우팅은 scrollTo 메인 관리자 페이지로 다시 저를 다시 라우팅 때문에 내 경우에는 나쁜 변화를 데리러 것으로 보인다.

$ location.hash()를 스크롤 한 다음 다시 설정하면 각도가 변경되어도 URL의 변경 사항이 작동하지 않는 것으로 판단됩니다.

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

편집 :

각도의 $anchorScroll가 직접와 URL을 업데이트 할 필요없이 매개 변수로 ID를 전달할 수 있습니다 1.4.0 때문에, @ theunexpected1에 의해 코멘트에서 언급 한 바와 같이

, 해시 :

Answer 2

당신은 내 blog과 이에 대한 질문에이 질문을 올렸습니다. 코드의 모든 보지 않고

, 나는 단지이 추측 할 수 있지만, 나는 당신에게 도움이 될 몇 가지 알 수 있습니다 :

1. 당신이 숨겨진 요소에 스크롤 할 수 있습니다.
2. 실제 스크롤은 $ digest 중에 처리되는 $ anchorScroll에 의해 설정되는 $ watch에 의해 수행됩니다.
3. 양식 요소를 표시하거나 숨기려면 설정하는 모든 항목도 $ digest의 $ watch에서 처리되고 있습니다.

그래서 나에게 모양을 보여주기 위해 값을 처리하기 전에 스크롤을 처리하려고합니다.이 문제를 해결하려면 양식을 표시하는 데 사용하는 코드를 리팩터링하거나 $ timeout에 $ anchorScroll 호출을 래핑하여 쇼 시계 후에 실행되도록하십시오.

도움이 되었기를 바랍니다.

Answer 3

나는이 문제를 과시하기 위해 큰 덩어리를 만들었습니다. 메시지를 표시하려면 버튼을 두 번 클릭해야합니다.

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

Answer 4

나중에 참조 할 수있는 동일한 문제가있는 스크롤링에 대해서는 n이지만 스크롤 할 때 ng-routes를 사용하면 @ Ben_Lesh의 대답은 사실 꽤 통찰력이 있습니다.

나는 스크롤

$location.hash(id) 
$anchorScroll() 

를 사용하여뿐만 아니라 처음 클릭 작동하지에 대한 동일한 문제로 실행되었다. 문제가 내 첫 번째 클릭 클릭 개체를 볼 수 설정 한 다음 그것을 스크롤하려고했지만 스크롤했을 때 요소가 여전히 페이지에 표시되지 않았습니다. 그런 다음주기가 끝나면 페이지가 다시 렌더링됩니다.

두 번째로 클릭하면 요소가 으로 설정되어이 표시되도록 설정되어 있으므로 스크롤이 정상적으로 작동합니다. 당신이 당신의 요소를 볼 수 부울을 설정 한 후

이 솔루션은 는

$ 시간 제한 호출하는 것입니다 ({(). $ $ 범위에 적용}() 함수를 0)

다음 스크롤 기능을 호출하십시오. 이렇게하면 스크롤하기 전에 다시 렌더링해야합니다. 빌라!

Answer 5

특정 요소로 스크롤하고 싶다면 URL을 업데이트하는 데 관심이 없었습니다 (예 : www.something.com/#admin의 # admin-form id). -form)

URL을 업데이트하지 않고 스크롤하면 위치 해시를 업데이트 할 필요없이 앵커 스크롤을 호출 할 수 있다는 것을 알았습니다.

$anchorScroll('admin-form');