련 지시어를 생성하는 내용의 테이블

Question

상상 html 텍스트를 포함하는 헤드라인(h1-h6).내 situtation 에 그것은 또한 현재스에서는 html 페이지입니다.그래서 사용 jQuery 나는 뭔가 $('.text').find('h1,h2,h3,h4,h5,h6') 을 추출하 모니다.

하지만 내가 사용하고 싶지 않 jQuery 또는 기타 무거운 framework.이렇게 하려면 어떻게 해야 합니까으로련?기억하시기 바랍 내가 필요로 하는 헤드라인을 올바른 순서를 표시로 사용할 수 있는 기능입니다.

Answer 1

여기서는 최종 해결책이 있습니다.NG-Model Part는 텍스트가 업데이트 될 때 헤드 라인을 업데이트하는 데 사용됩니다.

.directive('tableOfContents', function(){
    return {
        restrict:'A',
        require:'?ngModel',
        link : function(scope, elm, attrs,ngModel) {
            function updateHeadlines() {
                scope.headlines=[];
                angular.forEach(elm[0].querySelectorAll('h1,h2,h3,h4,h5,h6'), function(e){
                    scope.headlines.push({ 
                        level: e.tagName[1], 
                        label: angular.element(e).text(),
                        element: e
                    });
                });
            }
            // avoid memoryleaks from dom references
            scope.$on('$destroy',function(){
                scope.headlines=[];
            });
            // scroll to one of the headlines
            scope.scrollTo=function(headline){
                headline.element.scrollIntoView();
            }
            // when the html updates whe update the headlines
            ngModel.$render = updateHeadlines;
            updateHeadlines();
        }
    }
})

.

사용법 :

<a ng-repeat="headline in headlines" ng-click="scrollTo(headline)">{{headline.label}}</a>
<div table-of-contents ng-model="html">{{html}}</div>

.

Answer 2

당신은 운이,그리고를 사용할 수 있어야 합니다 각도입니다.소 거의 정확히 동일한 방식으로 사용하는 것 jQuery.

angular.element('h1') 을 찾을 것입 h1 요소입니다.

Answer 3

각도 JQLITE는 여기에 귀하의 옵션이지만 잊지 마십시오. 잊지 마십시오.

.find ()는 태그 이름으로 조회로 제한됩니다.

이 So 답변이 도움이되는 경우

Answer 4

클래스 ".text"를 사용하는 요소를

를 사용하여 찾을 수 있습니다.

angular.element(document.querySelectorAll(".text"));

.