Direttiva AngularJS per generare un sommario
-
21-12-2019 - |
Domanda
Immagina un testo HTML che contiene titoli (H1-H6).Nella mia situazione è anche presente come DOM in una pagina HTML.Quindi, usando JQuery, farei qualcosa come $('.text').find('h1,h2,h3,h4,h5,h6')
per estrarre tutte le titoli.
Ma non voglio usare jQuery o qualsiasi altro quadro pesante.Come posso farlo con Angularjs? Ricorda che ho bisogno dei titoli nell'ordine corretto per visualizzarlo come un sommario.
Soluzione
Quindi ecco la mia soluzione finale.La parte del modello NG viene utilizzata per aggiornare i titoli quando il testo viene aggiornato.
.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();
}
}
})
.
Uso:
<a ng-repeat="headline in headlines" ng-click="scrollTo(headline)">{{headline.label}}</a>
<div table-of-contents ng-model="html">{{html}}</div>
. Altri suggerimenti
Sei in fortuna, e dovrebbe essere in grado di usare angolare.element quasi esattamente nello stesso modo in cui useresti jQuery.
Puoi trovare gli elementi con la classe ".Text" usando
angular.element(document.querySelectorAll(".text"));
.