2016-05-19 12 views
1

最近、私のPhoneGapモバイルアプリケーションの1つにスライディングメニューを追加したところ、myNavigator.ResetToPage( 'htmlpage.html ')関数が機能しなくなりました。スライドメニューがOnsen UIのページに追加されている場合、Navigatorが動作しない

スライドメニューには、それほど重要ではない補助ビューが2つしか表示されません。ここで

<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu"> 
</ons-sliding-menu> 

<ons-template id="menu.html"> 
    <ons-list> 
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('main.html', {closeMenu: true})"> 
     Home 
    </ons-list-item> 
    <ons-list-item modifier="tappable" onclick="menu.setMainPage('my_stuff.html', {closeMenu: true})"> 
     My Stuff 
    </ons-list-item> 
    </ons-list> 
</ons-template> 


<ons-template id="main.html"> 
    <ons-navigator title="Navigator" var="myNavigator"> 
     <ons-page ng-controller="AppController" id="main"> 
      <ons-tabbar> 
       <ons-tab active="true" page="page1.html"> 
        <div class="tab"> 
         <ons-icon icon="ion-calendar" class="tab-icon"></ons-icon> 
         <div class="tab-label">Page 1</div> 
        </div> 
       </ons-tab> 
       <ons-tab page="page2.html"> 
        <div class="tab"> 
         <ons-icon icon="ion-checkmark" class="tab-icon"></ons-icon> 
         <div class="tab-label">Page 2</div> 
        </div> 
       </ons-tab> 
       <ons-tab page="settings.html"> 
        <div class="tab"> 
         <ons-icon icon="ion-gear-a" class="tab-icon"></ons-icon> 
         <div class="tab-label">Settings</div> 
        </div> 
       </ons-tab> 
      </ons-tabbar> 
     </ons-page> 
    </ons-navigator> 
</ons-template> 


<ons-template id="settings.html"> 
    <ons-page id="settings"> 
     <ons-toolbar style="background-color:#222;"> 
      <div class="center" style="color: white">Settings</div> 
     </ons-toolbar> 
     A HELP BUTTON WITH ng-click="navigateHelp()" 
     AN ABOUT BUTTON WITH ng-click="navigateAbout()" 
    </ons-page> 
</ons-template> 

index.htmlファイルのスケッチの作業を停止するナビゲータを作ったスライドメニューとナビゲーターとの間の接続は、ありますか?

答えて

0

setMainPageを使用すると、ons-sliding-menuのコンテンツが変更されています。 ons-navigatorは変更するコンテンツの一部なので、settings.htmlページにsetMainPageをロードすると、そこにナビゲータは表示されません(main.html内のみ)。

menu.setMainPageを使用して停止し、常にons-navigatorの方法を使用します。同等はmyNavigator.resetToPage(...)次のようになります。

<ons-template id="menu.html"> 
    <ons-list> 
    <ons-list-item modifier="tappable" onclick="myNavigator.resetToPage('main.html'); menu.close();"> 
     Home 
    </ons-list-item> 
    <ons-list-item modifier="tappable" onclick="myNavigator.resetToPage('my_stuff.html'); menu.close();"> 
     My Stuff 
    </ons-list-item> 
    </ons-list> 
</ons-template> 

メニューの内容、すなわちナビゲーター、そして唯一の変更ナビゲーターのコンテンツを維持するこの方法です。

+0

これは、メニューの[ホーム]ボタンを最初にクリックした場合にのみ機能します。 アプリを読み込むと、設定ページに直接移動し、ABOUT/HELPボタンをクリックしようとすると、機能しません。しかし、私がスライディングメニューを使用すると、ホームページ(ホームページから...奇妙なもの)にナビゲートし、その後、それが動作します。その後、すべてのページのナビゲーションは正常に動作します... – Laureant

+0

また、私はこのエラーが表示されます: "ons-navigator"に "ons-page"要素を指定することはできません。 myNavigator.resetToPage( 'main.html')を使用する場合 – Laureant

+0

はい、 'main.html'にはページではなく実際のナビゲータが含まれています。 'ons-navigator'を' navigator.html'に置き、スライディングメニューから 'main-page =" navigator.html "'属性を使って読み込みます。そして、 'main.html'にナビゲータコンポーネントなしで' ons-page'だけを含むようにします。ナビゲータには 'page =" main.html "属性が必要です。 –

関連する問題