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="https://stackoverflow.com/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><div id="services"></div>

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

ng-href="\#yourAnchorId"

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

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

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

LinkTo 및 Title은 SharePoint 열입니다.

나에게 가장 좋은 선택은 작업을 할 수있는 지침을 만들 수 있기 때문에 것이었다 $location.hash()과 $anchorScroll()내 SPA 라우팅에 문제를 많이 만드는 URL을 납치.

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

컨트롤러 내부에서 HTML ID로 이동할 수도 있습니다.

$location.hash('id_in_html');