Sliding Menu with navigator



  • I am currently building my first cordova app with onsen ui. Looks promising so far! But I ran into a problem I could not solve and I could not find the answer.
    I hope it is a beginner question and can be solved easily by someone with more experience with onsen.
    I want to have a sliding-menu and still the “usual” navigation on the main screen.
    Two different approaches I tried:

    <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>
    

    Result: No error messages. But once I navigate from the first main-page to another page I can’t open the sliding menu. (Same as in the official demo found in github repo called navigator_sliding-menu)

    <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>
    

    Same as here: http://codepen.io/argelius/pen/ogXGeV
    So the navigation element is moved to the first main-page.
    Result: I can navigate through the app (via pushPage in controller) and I can open the menu from every page. But once I click a link in the menu any pushPage calls result in the error messages:
    angular.min.js:108 TypeError: Cannot read property ‘$new’ of null

    Any ideas?
    Thank you in advance


  • Onsen UI

    Hi! The second approach is what you want. I think there is only one thing you need to change. In the menu you should call ons-navigator method instead of ons-sliding-menu methods. Otherwise you will change the content of the sliding menu frame and lose your navigator. Therefore, call app.navi.pushPage( ... ) or app.navi.replacePage( ... ) instead of menu.setMainPage( ... ). You can then use menu.closeMenu() after that.



  • @Fran-Diox It’s working thanks…


Log in to reply