Search code examples
javascriptangularjsangular-ui-routeronsen-ui

How to set ons-sliding-menu inside ons-navigator via Angular ui-router?

I want to load ons-sliding-menu inside the ons-navigator via angular ui-router, but it's not working. Please have a look on my below code, where i am doing wrong, and why it's happening, neither its showing any error in the console nor its working. Your help's will be really appreciated.

Angular :-

var app = angular.module('myApp', ['onsen', 'ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/slider');

    $stateProvider      
        .state('navigator', {
            abstract: true,
            url: '/navigator'
        })
        .state('navigator.slider', {
            parent: 'navigator',
            url: '/slider',
            onEnter: ['$rootScope', function($rootScope) {
                $rootScope.myNavigator.resetToPage('html/slider.html');
            }]
        })
    ;

});

HTML:-

<body ng-app="myApp">
    <ons-navigator title="Navigator" var="myNavigator"></ons-navigator>

    <ons-template id="html/slider.html">
        <ons-sliding-menu menu-page="html/menu.html" 
                          side="left" 
                          main-page="html/main.html" 
                          var="myMenu" type="reveal" 
                          max-slide-distance="260px" 
                          swipeable="true">
        </ons-sliding-menu>
    </ons-template>
</body>
Solution

  • Looks like ui-router is not working if there is no ui-sref in index.html. Adding the next dumb div to your index.html makes it work.

    <div style="height: 0; width: 0" ui-sref="navigator"></div>

    It doesn't matter the state it points to as long as it exists. To be honest, I don't know the reason but it works with this workaround.

    By the way, add an ons-page wrapping your ons-sliding-menu or the navigator will yell at you.

    Hope it helps!