角度快速滑出菜單

Question

我是新手角度捕捉。我有以下要求：

1. 滑出菜單左側
2. 應包含的子菜單
3. 子菜單也應該是可摺疊的。

角度捕捉是否會提供所有這些功能？

我開始使用角度卡入滑出菜單的示例。 如何在抽屜中給出兩個不同的菜單，並且當用戶單擊菜單1時，主div應顯示page1，並且當用戶單擊menu2時，主div應顯示page2。

Answer 1

兩個小點：

• Angular.js是構建單頁面應用程序的框架。
• Snap.js是一個庫，提供了一個「貨架」像菜單界面。

角度捕捉只是這兩個組件的集成。您不限於使用普通的JavaScript來根據用戶的點擊來顯示和隱藏頁面上的元素。

而不是告訴你應該怎麼弄角對齊專門要做到這一點，這裏是實現在角下拉隱藏/顯示動作，這與你的Snap.js應用程序實例絕對兼容的方式。

Angular.js Dropdown

function dropdown($scope) { 

    $scope.subitems = [ 
     { 
      title: 'Menu item one', 
      url: '#' 
     }, 
     { 
      title: 'Menu item two', 
      url: '#' 
     }, 
     { 
      title: 'Menu item three', 
      url: '#' 
     }, 
     { 
      title: 'Menu item four', 
      url: '#' 
     } 
    ]; 
} 


<nav class="dropdown-wrap" ng-app ng-controller="dropdown"> 
    <a href="#" class="dropdown-title" ng-click="showDetails = ! showDetails">Dropdown Menu</a> 
    <ul ng-repeat="subitem in subitems" ng-show="showDetails"> 
     <li> 
      <a href="{{subitem.url}}">{{subitem.title}}</a> 
     </li> 
    </ul> 
</nav> 

我先前的一點，你不一定考慮把這個最終都全部解決您的問題。在幾行JavaScript中可能有更簡單的解決方案，除非菜單項需要動態化，否則我不知道是否會產生額外的開銷和調試以使Angular產生可以進行硬編碼的標記。

無論哪種方式，我會考慮到您的所有要求，並從那裏開始。不要認爲這些庫是一個限制 - 它們中任何一個都不是不是 JavaScript，因此可能考慮使用其他開箱即用或易於使用瀏覽器中已有的簡單工具的解決方案。

編輯：借用here