توجيه AngularJS لإنشاء جدول محتويات

Question

تخيل نص HTML يحتوي على عناوين (h1-h6).في حالتي، فهو موجود أيضًا على شكل DOM في صفحة html.لذلك باستخدام jQuery سأفعل شيئًا مثل $('.text').find('h1,h2,h3,h4,h5,h6') لاستخراج جميع العناوين.

لكنني لا أرغب في استخدام jQuery أو أي إطار عمل ثقيل آخر.كيف يمكنني القيام بذلك مع angularJS؟يرجى تذكر أنني بحاجة إلى العناوين بالترتيب الصحيح لعرضها كجدول محتويات.

Answer 1

إذن هذا هو الحل النهائي.يُستخدم الجزء ng-model لتحديث العناوين الرئيسية عند تحديث النص.

.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') سوف نجد h1 عناصر.

Answer 3

Angular jqLite هو خيارك هنا، لكن لا تنس أن .find() يقتصر على عمليات البحث حسب اسم العلامة.

تحقق من هذه لذا لذا الإجابات إذا كان ذلك يساعد.

Answer 4

يمكنك العثور على العناصر التي تحتوي على الفئة ".text" باستخدام

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