Директива Angularjs для генерации оглавления

Question

Представьте себе HTML-текст, который содержит заголовки (H1-H6).В моей ситуации он также присутствует в виде DOM на HTML-странице.Таким образом, используя jQuery, я бы сделал что-то вроде $('.text').find('h1,h2,h3,h4,h5,h6') для извлечения всех заголовков.

Но я не хочу использовать jQuery или любые другие тяжелые рамки.Как я могу сделать это с Angularjs? Пожалуйста, помните, что мне нужны заголовки в правильном порядке, чтобы отобразить его как оглавление.

Answer 1

Так вот мое окончательное решение.Часть NG-модели используется для обновления заголовков, когда текст обновляется.

.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

Вам повезло, и должен быть в состоянии использовать angular.Element почти точно так же, как вы будете использовать jQuery.

angular.element('h1') найдет элементы генеракодицетагкода.

Answer 3

Угловой jqlite - ваш вариант здесь, но не забывайте, что .find () ограничен поиском по имени метки.

Проверьте эти Так что

Answer 4

Вы можете найти элементы, имеющие класс «.Text», используя

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

.