Direttiva AngularJS per generare un sommario

Question

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.

Answer 1

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>

.

Answer 2

Sei in fortuna, e dovrebbe essere in grado di usare angolare.element quasi esattamente nello stesso modo in cui useresti jQuery.

angular.element('h1') troverà elementi h1.

Answer 3

Angular JQLITE è la tua opzione qui, ma non dimenticare che .Find () è limitato alle ricerche per il nome del tag.

Controllare questi Quindi Allora risposte se ciò aiuta.

Answer 4

Puoi trovare gli elementi con la classe ".Text" usando

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

.