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: 원어민 각도

는 글글 、 글이 an 、$anchorScroll서비스가 제공되고 있습니다만, 서류가 매우 부족하고, 제대로 작동하지 않고 있습니다.

자세한 내용은 http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html을 참조하십시오.$anchorScroll.

옵션 2: 커스텀 디렉티브 / 네이티브 자바스크립트

디렉티브를 하여 커스텀 를 사용하는 입니다.el.scrollIntoView()이것은 기본적으로 디렉티브링크 기능에서 다음 작업을 수행함으로써 상당히 적절하게 동작합니다.

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

그러나 브라우저가 네이티브로 이 기능을 지원하는데 둘 다 하기에는 다소 과장된 것 같습니다.

옵션 3: 각도 오버라이드 / 네이티브 브라우저

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}}"/>

Angular에 좋은 예가 있습니다.JS 웹사이트:

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

업데이트: AngularJS 문서는 약간 모호했고 이에 대한 좋은 해결책을 제공하지 못했습니다.미안!

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

anchor Scroll을 사용해 볼 수 있습니다.

예

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

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을 변경할 필요가 없습니다.해쉬가 전혀 없어요.(정보)

루트에 전혀 영향을 주지 않기 때문에 이것이 최선의 해결책입니다.ngRoute를 사용하고 있기 때문에 다른 솔루션을 사용할 수 없었습니다.또한 루트는 설정 즉시 새로고침됩니다.$location.hash(id)$anchorScroll이 마법을 부리기 전에.

사용법은 다음과 같습니다.먼저 지시 또는 컨트롤러에서 다음을 수행합니다.

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

다음으로 뷰에서 다음을 수행합니다.

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

또한 고정 네비게이션바(또는 다른 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를 사용하고 있고 각도가 있는 경우 다음과 같이 수행합니다.

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

LinkTo 및 Title은 SharePoint 열입니다.

나에게 가장 좋은 선택은 그 일을 지시하는 것이었다. 왜냐하면$location.hash()그리고.$anchorScroll()URL을 하이잭하여 SPA 라우팅에 많은 문제를 일으킵니다.

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');

언급URL : https://stackoverflow.com/questions/14026537/anchor-links-in-angularjs