Question

我使用angular-snap.js指令使用带有AngularJS的snap.js。 https://github.com/jtrussell/angular-snap.js

我也在使用安迪·乔斯林的角度移动导航。

我想知道应该在哪里存储菜单的代码：

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

因为这不是angular-mobile-nav中的唯一页面，所以我现在只使用包含所有菜单代码/ html的指令。

似乎这样效率低，因为它在每个页面上加载一个新指令，对吧？关于如何做得更好的任何想法？

谢谢！

Answer 1

所以这就是我所做的（我也使用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);
};

如果您还有疑问，请发表评论。我会尽快更新这个答案。

使用angular-snap时放置菜单的位置？

1 个答案: