2

angular-snap.js ディレクティブを使用して、AngularJS で 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>

これは angular-mobile-nav 内の固有のページではないため、現在、すべてのページに を配置し、すべてのメニュー コード/html を含むディレクティブを使用しています。

各ページに新しいディレクティブをロードしているため、これは非効率的であると思われますよね? これをより良くする方法について何か考えはありますか？

ありがとう！

4

1 に答える 1

2

これが私がやったことです（私は and も使用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) オーバーライドするだけです ;)

2 つのアニメーションが同時に発生するのが気に入らない場合は、サイドバーが閉じるのを待ってからページを変更する関数を作成できます。次のようになります。

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

まだ質問がある場合は、コメントしてください。この回答をできるだけ早く更新しようとします。

于 2013-08-02T09:51:10.097 に答える