何时使用角度捕捉菜单？

我使用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

何时使用角度捕捉菜单？

回答

相关问题