Директива Angularjs для генерации оглавления
-
21-12-2019 - |
Вопрос
Представьте себе HTML-текст, который содержит заголовки (H1-H6).В моей ситуации он также присутствует в виде DOM на HTML-странице.Таким образом, используя jQuery, я бы сделал что-то вроде $('.text').find('h1,h2,h3,h4,h5,h6')
для извлечения всех заголовков.
Но я не хочу использовать jQuery или любые другие тяжелые рамки.Как я могу сделать это с Angularjs? Пожалуйста, помните, что мне нужны заголовки в правильном порядке, чтобы отобразить его как оглавление.
Решение
Так вот мое окончательное решение.Часть 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>
. Другие советы
Вам повезло, и должен быть в состоянии использовать angular.Element почти точно так же, как вы будете использовать jQuery.
Угловой jqlite - ваш вариант здесь, но не забывайте, что .find () ограничен поиском по имени метки.
Проверьте эти Так что
Вы можете найти элементы, имеющие класс «.Text», используя
angular.element(document.querySelectorAll(".text"));
.