I'm having trouble loading ons-sliding-menu inside the ons-navigator using angular ui-router. Can someone please take a look at my code below and let me know what I'm doing wrong? I'm not getting any errors in the console, but it's just not working. Any help would be greatly 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>