何時使用角度捕捉菜單？

我使用snap-js和AngularJS使用angular-snap.js指令。 https://github.com/jtrussell/angular-snap.js 何時使用角度捕捉菜單？

我也在使用Andy Joslin的angular-mobile-nav。

我不知道，我應該代碼存儲菜單：

<snap-drawer> 
    <p>I'm a drawer! Where do I go in the angular code?</p> 
</snap-drawer>

因爲這不是角移動導航中的唯一頁面，我目前把每一頁上並使用包含我所有菜單代碼/ html的指令。

看起來像這樣可能是低效的，因爲它在每個頁面上加載一個新的指令，對嗎？任何想法如何更好地做到這一點？

謝謝！

來源

2013-07-13 Hawk

我沒有使用'snap.js'，而是使用了一些自寫的sidebar-directive。我已經將它的HTML放在index.html文件中（'

'）。我使用'$ route.current.locals。$ scope'獲取當前作用域的側邊欄數據。通過使用'ng-repeat'，我可以顯示側邊欄內容（一個列表）。我不知道這是否有效，但你可以嘗試圍繞'snap.js'（指令初始：P）創建一個指令。 – AndreM96

感謝您的評論！我嘗試將我的側邊欄放在索引中，但是當包裹時，由於我的菜單超出了所有動畫發生的指令，因爲過渡動畫看起來並不平滑，所以播放效果不佳。 – Hawk

所以這就是我所做的（我也使用angular-mobile-nav和angular-snap.js）。

這是我的HTML代碼

<body ng-app="MyApp"> 
    <div snap-drawer> 
     <ul class="list"> 
      <li ng-repeat="item in sidebar.items" ng-i18next="{{item.name}}" ng-tap="snapper.close();go(item.link)"></li> 
     </ul> 
    </div> 

    <div id="container" snap-content snap-options="snapOpts"> 
     <div mobile-view=""></div> 
    </div> 
</body>

請注意go()是改變頁面的功能，我使用ng-i18next翻譯我的項目。另外ng-tap是一個指令，它偵聽觸摸事件而不是鼠標事件。隨着Angular> 1.1.5有一個移動模塊，所以我的ng-tap指令將不再需要。

，並通過使用$rootScope我可以把物品在側邊欄：

$rootScope.sidebar = { 
    items: [ 
     { 
      name: 'item_one', 
      link: 'page_one' 
     }, 
     ... 
    ] 
};

所以，如果你想改變在側邊欄的項目，只需覆蓋$rootScope.sidebar在你的控制器（未$scope.sidebar）;）

如果你不喜歡兩個動畫同時發生，你可以編寫一個函數，等待邊欄關閉，然後改變頁面。它可能看起來像這樣：

$rootScope.waitThenGoTo = function (page, time) { 
    time = time || 200; 
    $timeout(function() { 
     $navigate.go(page); 
    }, time); 
};

如果您還有疑問，請評論。我會盡快更新這個答案。

來源

2013-08-02 09:51:10 AndreM96

這有效，但我無法讓動畫看起來流暢。有點波動，因爲它首先關閉捕捉菜單，然後滑動到下一頁。我需要決定是否需要在每個「頁面」上包含HTML菜單的代價來獲得更流暢的體驗。如果您有關於如何使轉換非常順利的想法，請讓我知道。無論哪種方式，真的很感謝這個建議。 – Hawk

是的，它看起來並不那麼光滑。：/你可以嘗試改變代碼，所以當側邊欄關閉時，內容仍然粘在邊欄的邊框上。這意味着動畫必須同步，這並不容易。您也可以嘗試更改頁面，然後關閉側邊欄。我還沒有嘗試過，但如果找到解決方案，我會通知您。 ;） – AndreM96

何時使用角度捕捉菜單？

回答

相關問題