Odak UI kayan menüsünü gezinme ile birleştirin

Question

Şu anda ilk cordova uygulamasını onsen ui ile yapıyorum. Şimdiye kadar umut verici görünüyor! Ama çözemediğim bir soruna rastladım ve cevabı bulamadım.

Umarım bu yeni başlayan bir sorundur ve onsen ile daha fazla deneyimi olan biri tarafından kolayca çözülebilir.

Bir ana menüde bir kayan menü ve yine de "olağan" gezinmeye sahip olmak istiyorum.

İki farklı yaklaşım denedim:

1)

<ons-navigator var="app.navi"> 
    <ons-page> 
     <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left" 
    var="menu" type="reveal" max-slide-distance="260px" swipable="true"> 
     </ons-sliding-menu> 
    </ons-page> 
</ons-navigator> 

<ons-template id="menu.html"> 
    <ons-page modifier="menu-page"> 

     <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> 
      Continue last story 
     </ons-list-item> 

     ... 

    </ons-page> 
</ons-template> 

<ons-template id="page1.html"> 
<ons-page ng-controller="BooksCtrl"> 
     // Navigation in controller: 
     app.navi.pushPage("new_action.html", { 
      animation: "lift" 
     }); 

    </ons-page> 
</ons-template> 

Sonucu: Hiçbir hata iletileri. Ama ilk ana sayfadan başka bir sayfaya geçtiğimde kayan menüyü açamıyorum.

2) burada da

 <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left" 
    var="menu" type="reveal" max-slide-distance="260px" swipable="true"> 
     </ons-sliding-menu> 


<ons-template id="menu.html"> 
    <ons-page modifier="menu-page"> 

     <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> 
      Continue last story 
     </ons-list-item> 

     ... 

    </ons-page> 
</ons-template> 

<ons-template id="page1.html"> 
<ons-navigator animation="slide" var="app.navi"> 
<ons-page ng-controller="BooksCtrl"> 
     // Navigation in controller: 
     app.navi.pushPage("new_action.html", { 
      animation: "lift" 
     }); 

    </ons-page> 
    </ons-navigator> 
</ons-template> 

aynı (github Repo denilen navigator_sliding-menüsünde bulunan resmi demo ile aynı): http://codepen.io/argelius/pen/ogXGeV Yani navigasyon elemanı birinci ana sayfa taşınır. Sonuç: Uygulamada gezinebilirim (denetleyicideki pushPage üzerinden) ve menüyü her sayfadan açabilirim. Ancak menüdeki bir bağlantıyı tıklattığımda herhangi bir pushPage çağrısı hata iletisine neden olur:

Uncaught TypeError: Cannot read property '$$phase' of null 
Uncaught Error: Fail to fire "pageinit" event. Attach "ons-page" element to the document after initialization. 

Herhangi bir fikir var mı?

önceden index.html içinde <ons-sliding-menu> sahip

Answer 1

deneyin teşekkür ederiz. Eğer navigasyon kullanmak istediğiniz yere page1.html üzerinde Sonra

<ons-sliding-menu 
 
    menu-page="menu.html" main-page="page1.html" side="left" 
 
    var="menu" type="reveal" max-slide-distance="260px" swipable="false" swipe-target-width="50"> 
 
    </ons-sliding-menu>

: Örneğin sizin Dizininizin gövdesinin tamamını olurdu var. Lütfen kullanın

<ons-page modifier="menu-page"> 
 

 
     <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})"> 
 
      Continue last story 
 
     </ons-list-item>

ve iz sayfalarının herhangi sonunu istiyorum nihayet eğer. Navigator'ınızı son sayfaya kullanın. v-page2.html-v

<ons-navigator var="app.navi"> 
 
<ons-list-item class="menu-item" ng-click="app.navi.pushPage("new_action.html", { 
 
     animation: "lift" 
 
    })"> 
 
      Continue last story 
 
     </ons-list-item> 
 
<ons-navigator>

geri dönmek için. Sadece bir ng-click="app.navi.popPage()" kullanın. Ama DTFagus'un dediği gibi. Navigator kullanmak son sayfalar için daha iyidir.