해싱과 라우팅 연결 -`$ anchorScroll` 문제 해결

Question

참고 : 아직 해결되지 않았습니다. 이 포스팅은 내가 ngRoute를 사용하여 각도의 최신 버전입니다있어 이후 내 문제에 대한 해결책을 설명하는 것 같다,하지만 난 그녀 솔루션 작품 만들 수 없습니다 : 내 단일 페이지 응용 프로그램에 https://stackoverflow.com/a/35028895/6647188

을 : https://kylevassella.github.io/
내 탐색 버튼을 다른보기의 해시 링크에 연결하려고합니다. 답변을 위해 허용 된 답변을 사용하고 있습니다. How to handle anchor hash linking in AngularJS

내 사이트에 ($anchorScroll)을 구현하는 데 문제가 있습니다.

내가 무슨 말을하는지 확인하려면 :
이

1. 내 Plunker 다음 탐색 메뉴 ('홈 포트폴리오 연락처') 상단에 나타나도록 https://plnkr.co/edit/fgTG7j?p=info이 충분히 넓은 미리보기 창을 확인합니다.
   

2. 을 '프로젝트'로 스크롤하고 '프로젝트 1'을 클릭하십시오. 이 & ng-show 다른 탐색 줄 수있는 새로운보기를 엽니 다 (오래된 같은 보인다. 이러한 탐색 앵커 index.html 아래 <section ng-show="showPortfolioHeader"> 봐).

3. 
   여기에서 나는 '포트폴리오'& '연락처'내 views/home.html보기에서 #portfolio & #contact 해시 링크 ID 년대에 연결할. 하지만 그들은 페이지의 해당 스크롤 지점이 아니라 올바른 경로 (views/home.html)로만 을 데려갑니다.
   참고 : Plunker에서 이러한 경로는 올바른 경로로 연결되지 않아서 나를 404로 데려옵니다. 문제가되지 않습니다. - 로컬 컴퓨터에서이 부분이 올바르게 작동합니다. 내 문제는 일단 views/home.html 뷰에 도달하면 브라우저가 해시 링크로 스크롤하지 않는다는 것입니다.
   

Answer 1

편집 :이 잘못 온 방식에서 찾고 있었어요.

경로를 변경하지 않으므로 스크롤러가 작동하지 않는 것입니다.

초기 메뉴는 일반적인 anchorScroll 항목으로 캡처됩니다.

그러나 나중에 그걸 숨기고 "포트폴리오 헤더 표시"를하면 이 아닌 새로운 경로 인에 연결됩니다. <a href="/?scrollTo=contact">은 여전히 ​​/ 경로이며 일부 매개 변수가 있습니다. 따라서 경로가 변경되지 않고 라우터가 반응하지 않습니다.

다른 메뉴가있는 이유에 대해 자세히 언급하지 않고 포트폴리오 헤더에서 href 대신 ng-click을 사용하고 프로그래밍 방식으로 트리거하는 것이 더 좋습니다.

또는 두 개의 메뉴를 병합하는 것만으로도 충분히 유사하게 보입니다. 그냥 전체 메뉴가 아닌 영웅의 용기를 숨기십시오.

href="#/?scrollTo=contact" 

에 그리고 당신의 scrollTo 작동하는지

href="/?scrollTo=contact" 

변경 : 내가 제대로 질문을 이해하면

,이 문제입니다. 브라우저 (예를 들어, 크롬)는 /?scrollTo=contact와 href을 본다면, 그것은 아 "라고 때문에 즉, / (또는 index.html 겠다는 링크!입니다. 그것은 일을하기 위해 자바 스크립트 (및 각도) 시간을주지 않고, 바로 이동합니다.

그러나 링크 앞에 #을 추가하면 브라우저가 탐색하지 않고 다른 앵커와 동일한 페이지에 머물러 있어야한다는 것을 알고 있습니다. 이제 클릭하여 각도를 파악하여 작업 할 수 있습니다.

참고 사항 : 로컬 개발 환경에서 index.html과 일치하지 않는 모든 항목을 리다이렉트했을 수 있으므로 로컬에서 작동하는 부분이 무엇입니까? 에 가려고 시도합니다.,210 홈 링크와 페이지, 그러나 보조 노트로 당신에게 404