프로젝트중 네임앵커기능을 달아야 했다.

 

 

<div id="top"></div>

<a href="#top">이동</a>

 

 

위 코드처럼 a태그를 클릭하면 해당 #뒤에 id값 태그로 이동하는 간단한것 이었기에 금방 하겠구나 생각했는데
동작을 하지않았다.

 

해당 프로젝트가 AngularJS를 사용중이었는데 분명 이녀석 때문일거라 생각하고
바로 구글링

 

다음과 같은 결과를 얻었다

https://docs.angularjs.org/api/ng/service/$anchorScroll

 

AngularJS

Loading … There was an error loading this resource. Please try again later.

docs.angularjs.org

 

짧게 정리 해보자면

 

 

<a href="javascript:;" ng-click="clickScroll(이동할 태그 id명)">이동</a>

 

$scope.clickScroll = function(id) {
     $location.hash(id);
     $anchorScroll();
};

$location 과 $anchorScroll만 주입시켜 이용하면 끝

 

1. 헤더에 추가

<script src="경로/angular-sanitize.js"></script>

 

2. 변환

$scope.변수 = $sce.trustAsHtml(HTML이 포함된 텍스트);

 

3. 적용

<p ng-bind-html="변수"></p>

 

 

출처

http://naminsik.com/blog/3136

+ Recent posts