2

我使用 angular-snap.js 指令将 snap.js 与 AngularJS 一起使用。 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>

因为这不是 angular-mobile-nav 中的唯一页面，所以我目前将其放在每个页面上，并且只使用包含我所有菜单代码/html 的指令。

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

谢谢！

4

1 回答 1

2

所以这就是我所做的（我也使用angular-mobile-navand 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(not $scope.sidebar) ;)

如果您不喜欢两个动画同时发生，您可以编写一个函数，等待侧边栏关闭然后更改页面。它可能看起来像这样：

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

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

于 2013-08-02T09:51:10.097 回答