AngularJS指令生成目錄

想象一下包含標題（h1-h6）的html文本。在我的情況下，它也在html頁面中呈現爲DOM。所以使用jQuery我會做一些像$('.text').find('h1,h2,h3,h4,h5,h6')來提取所有的標題。AngularJS指令生成目錄

但我不想使用jQuery或任何其他重型框架。我怎樣才能做到這一點與angularJS？請記住，我需要按照正確的順序將標題顯示爲目錄。

來源

2014-02-25 MrJingles87

因此，這裏是我的最終解決方案。 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>

來源

2014-02-25 15:43:36 MrJingles87

你很幸運，應該可以使用angular.element幾乎完全相同的方式，因爲你會使用jQuery。

angular.element('h1')會發現h1元素。

來源

2014-02-25 09:01:47 Mikke

的問題是：我能找到的所有的頭條新聞，但我會如何確定它們的正確順序？ – MrJingles87

Angular jqLite是您的選擇，但請不要忘記.find（）僅限於通過標記名查找。

檢查這些SO SO答案如果有幫助。

來源

2014-02-25 09:06:27

不回答問題，因爲它不涉及檢索標題的順序。 – MrJingles87

您可以找到具有類元素「的.text」使用

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

來源

2014-02-25 09:07:04 V31

它並沒有完全回答我的問題，但是document.querySelectorAll把我帶到了正確的道路上。我可以做element.querySelectorAll（'h1，h2，h3，h4，h5，h6'）來解決我的問題。 – MrJingles87

AngularJS指令生成目錄

回答

相關問題