Angularjs의 앵커 링크?

Angularjs의 앵커 링크?

---

Angularjs에서 앵커 링크를 사용할 수 있습니까?

즉 :

 <a href="#top">Top</a>
 <a href="#middle">Middle</a>
 <a href="#bottom">Bottom</a>

 <div name="top"></div>
 ...
 <div name="middle"></div>
 ...
 <div name="bottom"></div>

감사합니다

---

이를 수행하는 몇 가지 방법이있는 것 같습니다.

옵션 1 : 기본 각도

Angular는 $anchorScroll서비스를 제공하지만 문서가 심각하게 부족하여 작동하지 못했습니다.

에 대한 통찰력은 http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html 을 확인하십시오 $anchorScroll.

옵션 2 : 사용자 지정 지시문 / 기본 JavaScript

내가 테스트 한 또 다른 방법은 사용자 지정 지시문을 만들고 el.scrollIntoView(). 이것은 기본적으로 지시문 링크 함수에서 다음을 수행하여 꽤 괜찮습니다.

var el = document.getElementById(attrs.href);
el.scrollIntoView();

그러나 브라우저가 기본적으로 지원할 때이 두 가지를 모두 수행하는 것은 약간 과장된 것 같습니다.

옵션 3 : Angular Override / Native Browser

http://docs.angularjs.org/guide/dev_guide.services.$location 및 HTML 링크 재 작성 섹션을 살펴보면 다음에서 링크가 재 작성되지 않음을 알 수 있습니다.

대상 요소를 포함하는 링크

예: <a href="/ext/link?a=b" target="_self">link</a>

따라서 다음 target과 같이 링크에 속성을 추가하기 만하면됩니다.

<a href="#anchorLinkID" target="_self">Go to inpage section</a>

Angular는 기본적으로 브라우저로 설정되며 다른 기본 URL이 아닌 앵커 링크이므로 브라우저는 원하는대로 올바른 위치로 스크롤합니다.

여기에서는 기본 브라우저 기능에 의존하는 것이 가장 좋고 시간과 노력을 절약하기 때문에 옵션 3을 선택했습니다.

성공적인 스크롤 및 해시 변경 후 Angular는 후속 작업을 수행하고 해시를 사용자 지정 스타일로 다시 작성합니다. 그러나 브라우저는 이미 사업을 완료했으며 당신은 갈 수 있습니다.

---

이것이 귀하의 질문에 대한 답인지 모르겠지만 예, 다음과 같은 angularjs 링크를 사용할 수 있습니다.

<a ng-href="http://www.gravatar.com/avatar/{{hash}}"/>

AngularJS 웹 사이트에 좋은 예가 있습니다.

http://docs.angularjs.org/api/ng.directive:ngHref

업데이트 : AngularJS 문서는 약간 모호했으며 이에 대한 좋은 솔루션을 제공하지 않았습니다. 죄송합니다!

여기에서 더 나은 솔루션을 찾을 수 있습니다. AngularJS에서 앵커 해시 링크를 처리하는 방법

---

anchorScroll 을 사용할 수 있습니다 .

예

따라서 컨트롤러는 다음과 같습니다.

app.controller('MainCtrl', function($scope, $location, $anchorScroll, $routeParams) {
  $scope.scrollTo = function(id) {
     $location.hash(id);
     $anchorScroll();
  }
});

그리고보기 :

<a href="" ng-click="scrollTo('foo')">Scroll to #foo</a>

... 그리고 앵커 ID에 대한 비밀은 없습니다.

<div id="foo">
  This is #foo
</div>

---

$ anchorScroll은 실제로 이것에 대한 답이지만 Angular의 최신 버전에서 사용하는 훨씬 더 좋은 방법이 있습니다.

이제 $ anchorScroll은 해시를 선택적 인수로 허용하므로 $ location.hash를 전혀 변경할 필요가 없습니다. ( 문서 )

이것은 경로에 전혀 영향을주지 않기 때문에 최상의 솔루션입니다. ngRoute를 사용하고 있고 $location.hash(id)$ anchorScroll이 마법을 수행하기 전에 내가 설정하자마자 경로가 다시로드되기 때문에 다른 솔루션을 사용할 수 없었습니다.

사용 방법은 다음과 같습니다. 먼저 지시문 또는 컨트롤러에서 :

$scope.scrollTo = function (id) {
  $anchorScroll(id);  
}

그런 다음보기에서 :

<a href="" ng-click="scrollTo(id)">Text</a>

또한 고정 된 navbar (또는 기타 UI)를 고려해야하는 경우 다음과 같이 $ anchorScroll의 오프셋을 설정할 수 있습니다 (메인 모듈의 실행 함수에서).

  .run(function ($anchorScroll) {
      //this will make anchorScroll scroll to the div minus 50px
      $anchorScroll.yOffset = 50;
  });

---

나는 같은 문제가 있었지만 이것은 나를 위해 일했습니다.

<a ng-href="javascript:void(0);#tagId"></a>

---

나를 위해 작동 :

 <a onclick='return false;' href="" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" ng-href="#profile#collapse{{$index}}"> blalba </a>

---

링크에 target = "_ self"만 추가하면됩니다.

전의. <a href="#services" target="_self">Services</a>

---

또는 간단히 다음과 같이 작성할 수 있습니다.

ng-href="\#yourAnchorId"

해시 기호 앞에있는 백 슬래시를 확인하세요.

---

SharePoint 및 angular를 사용하는 경우 다음과 같이하십시오.

<a ng-href="{{item.LinkTo.Url}}" target="_blank" ng-bind="item.Title;" ></a> 

LinkTo 및 Title은 SharePoint 열입니다.

---

The best choice to me was to create a directive to do the work, because $location.hash() and $anchorScroll() hijack the URL creating lots of problems to my SPA routing.

MyModule.directive('myAnchor', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elem, attrs, ngModel) {
      return elem.bind('click', function() {
        //other stuff ...
        var el;
        el = document.getElementById(attrs['myAnchor']);
        return el.scrollIntoView();
      });      
    }
  };
});

---

You can also Navigate to HTML id from inside controller

$location.hash('id_in_html');

참고URL : https://stackoverflow.com/questions/14026537/anchor-links-in-angularjs