angular-snap滑出菜单

时间:2014-08-27 22:21:18

标签: angularjs

我是角撞的新手。我有以下要求:

  1. 滑出菜单左侧
  2. 应包含子菜单
  3. 子菜单也应该是可折叠的。
  4. 角度捕捉会提供所有这些功能吗?

    我开始使用角度滑动滑出菜单的示例。 我们如何在抽屉中提供两个不同的菜单,当用户点击menu1时,主div应显示page1,当用户点击menu2时,主div应显示page2。

1 个答案:

答案 0 :(得分:1)

两个小问题:

  • Angular.js 是用于构建单页面应用程序的框架。
  • Snap.js 是一个提供" shelf"喜欢菜单界面。

Angular Snap 只是这两个组件的集成。您不能使用普通的JavaScript来根据用户的点击在页面上显示和隐藏元素。

不是告诉你应该如何获得 Angular Snap 来实现这一点,而是在Angular中实现下拉隐藏/显示操作的方法,与您的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产生可能很难的标记-coded。

无论哪种方式,我都会考虑你的所有要求并从那里开始。不要认为这些库是一个限制 - 其中任何一个都不属于不是 JavaScript,所以可能考虑其他开箱即用或易于实现使用浏览器中已存在的简单工具的解决方案。

编辑:借用here

中的一些代码