AngularJS「Accordion」風格菜單+動態數據+子菜單+使用li ----工作示例

Question

我想要做的是在AngularJS中創建一個帶有子菜單的全手風琴式導航菜單。它必須動態加載菜單數據，動態分配哪些菜單項具有子菜單，哪些菜單項沒有，等等 - 下面的完整列表。

我嘗試過使用angular-ui/bootstrap手風琴元素，但不太喜歡它如何讓我處理它們的行爲。如果我使用< \ accordion>並且想要消除手風琴的行爲，這似乎是違反直覺的。我已經回到使用列表項目（< \ li>），因爲它允許最大的靈活性/樣式。

我想將執行以下操作：菜單數據的

• 動態加載
• 子菜單數據
• 動態加載其中的菜單有子菜單，並且不
的動態加載
• 手風琴風格：用一個子菜單點擊一個菜單項，將關閉另一個子菜單。
• 每個終點菜單都是一個鏈接：如果一個菜單沒有子菜單，它是一個鏈接 - >導航 - 如果一個菜單有子菜單，它會打開它的子​​菜單，並且不會導航。
• 點擊遠離菜單區域，將會摺疊所有子菜單。
• 狀態感知：應該知道哪個菜單處於活動狀態，允許我們在活動菜單項上設置class =「active（{{menuItem.url}}）」類型的東西。
• 子菜單知道：我們應該能夠添加人字形上/下/左/右來指示哪個菜單元素具有子菜單 - 以及子菜單處於（打開/關閉）狀態。
• 儘可能在CSS/HTML中完成，應該是。

在此基礎上的帖子在這裏：Closing open submenu - jQuery accordion
我有這個jQuery的一個工作版本 - 在這裏提琴：http://jsfiddle.net/52EH8/20/

function initMenu() { 
    $('#nav ul').hide(); 
    $('#nav li a').click(

    function() { 

     var checkElement = $(this).next(); 
     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      $('#nav ul:visible').slideToggle('normal'); 
     } 
     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      removeActiveClassFromAll(); 
      $(this).addClass("active"); 
      $('#nav ul:visible').slideToggle('normal'); 
      checkElement.slideToggle('normal'); 
      return false; 
     } 

     if($(this).siblings('ul').length==0 && $(this).parent().parent().attr('id')=='nav') 
     { 

      removeActiveClassFromAll(); 
      $(this).addClass("active"); 
      $('#nav ul:visible').slideToggle('normal'); 

      return false; 
     } 
    }); 
} 

function removeActiveClassFromAll() { 
    $('#nav li a').each(function (index) { 
     $(this).removeClass("active"); 
    }); 
} 


$(document).ready(function() { 
    initMenu(); 
}); 

$('#nav').click(function (e) 

{ 
    e.stopPropagation(); 


}) 




$(document).click(function() { 
    $('#nav').children('li').each(function() { 
     if ($(this).children('ul').css('display') == 'block') { 
      $(this).children('ul').slideToggle('normal') 
      $(this).children('a').removeClass('active') 
     } 
    }) 
}) 

我的JSON菜單（咖啡腳本）是：

S.mainMenu = [ 
     name: 'Home' 
     url: 'home' 
     icon: 'fa-home' 
    , 
     name: 'Events' 
     url: 'events' 
     icon: 'fa-bullhorn' 
    , 
     name: 'Jobs' 
     url: 'jobs' 
     icon: 'fa-laptop' 
    , 
     name: 'Resources' 
     icon: 'fa-cloud-download' 
     submenu: [ 
      name: 'Guides & Tutorials' 
      url: 'res-guides' 
      icon: 'fa-lightbulb-o' 
     , 
      name: 'Docs & Templates' 
      url: 'res-docs' 
      icon: 'fa-file-text' 
     , 
      name: 'Photos & Video' 
      url: 'res-media' 
      icon: 'fa-film' 
     ] 
    , 
     name: 'TechGrind' 
     icon: 'fa-cogs' 
     submenu: [ 
      name: 'Startup Hubs' 
      url: 'tg-hubs' 
      icon: '' 
     , 
      name: 'Membership' 
      url: 'tg-members' 
      icon: '' 
     , 
      name: 'Community' 
      url: 'tg-activities' 
      icon: '' 
     , 
      name: 'Incubator' 
      url: 'tg-incubator' 
      icon: '' 
     ] 
    ]; 

正如你所看到的 - 有3個正常的菜單和2個菜單與子菜單。

或多或少 - 如何正確地將其從jQuery轉換爲「思考角」？ ATM我的主要問題是：在哪裏正確放置$（document）.ready來觸發initMenu（）？我強烈地感覺到，這應該全部置於指令中，而不是 - 或2個指令（1 =頂級手風琴菜單，2 =子菜單）。我對指令不太滿意，但這是我的問題。

我見過很多關於這種類型的菜單的帖子 - 我認爲用X菜單，Y子菜單等等來創建一個通用的，動態加載的人是有益的。 。我已經格式化了我的問題ACCORDINgly（雙關語），以便它可以滿足所有需求。

在此先感謝！

Answer 1

這是一個基於bootstrap崩潰插件的角度指令。它使用零jQuery，你可以自定義它，如果你想。

Demo Plunker

手風琴行爲依賴於下面的模板從Bootstrap：

<div id="parent"> 
    <div class="panel"> 
     <div data-toggle="collapse" data-parent="#parent" data-target="#child">test</div> 
     <div id="child" class="collapse in"> 
      This is the content 
     </div> 
    </div> 
    <div class="panel"> 
     <div data-toggle="collapse" data-parent="#parent" data-target="#child2">test</div> 
     <div id="child2" class="collapse"> 
      This is the content 
     </div> 
    </div> 
</div> 

Answer 2

如果您已經在使用Bootstrap進行造型，我強烈建議您使用Angular-UI Bootstrap。使用這個模塊你不必重新發明輪子。只要看看this example，它基於文檔中的Accordion示例。