I have a mobile application that I'm developing on phonegap with onsen and I have a page where I have the component <ons-sliding-menu>
but when I click on the button open that menu does not open nothing happens I do not know what it may be I've already gone round and round and I could not find the error.
From what I already had to see if I discovered the problem I discovered but I can not solve the problem is with the ons-navigator
that I have in the page if I remove the menu already opens well if it does not open, I now leave the whole code that I have to better understand.
Code
<ons-navigator var="login.navegacao" page="login.html"></ons-navigator>
<ons-template id="login.html">
<ons-page>
<ons-toolbar fixed-style style="background-color: #589397;">
<div style="color: #ffffff; font-weight: 700;" class="center">Login</div>
</ons-toolbar>
<form id="login_form" name="login_form" method="post" enctype="multipart/form-data" >
<input type="hidden" name="valida_login" id="valida_login" value="ok_login">
<div class="login-form">
<img width="100%" src="img/logo.png" alt=""/>
<button id="facebook_login" class="button button--large"><ons-icon icon="facebook" size="20px" fixed-width="true"></ons-icon>Facebook</button><br>
<button style="background-color: #ca5b60;" class="button button--large"><ons-icon icon="google" style="margin-left: -20px;" size="20px" fixed-width="true"></ons-icon>Google</button>
<input type="email" class="text-input--underbar" id="email_login" name="email_login" placeholder="Email" value="">
<input type="password" class="text-input--underbar" id="password_login" name="password_login" placeholder="Password" value="">
<br><br>
<button id="btn_login" style="background-color: #589397;" name="btn_login" class="button button--large">Entrar</button><br>
<button onclick="login.navegacao.pushPage('registo.html', { animation : 'slide' } )" style="background-color: #589397;" class="button button--large">Registar</button>
<br>
<ons-button onclick="login.navegacao.pushPage('recuperar_pass.html', { animation : 'slide' } )" modifier="quiet" class="forgot-password">Esqueceu-se da password?</ons-button>
</div>
</form>
</ons-page>
</ons-template>
<ons-template id="registo.html">
<link rel="stylesheet" href="css/registo.css">
<ons-page>
<ons-toolbar fixed-style style="background-color: #589397;">
<div class="left"><ons-back-button>Voltar</ons-back-button></div>
<div style="color: #ffffff; font-weight: 700;" class="center">Registo</div>
</ons-toolbar>
<form id="registo_form" name="registo_form" method="post" enctype="multipart/form-data" >
<input type="hidden" name="valida_registo" id="valida_registo" value="ok_registo">
<div class="formarea">
<div class="form-row">
<div class="titulo_registo">Inscreve-te no SabeOnde para encontrar e guardar todas as coisas que te inspiram.</div>
</div>
<div class="form-row">
<input type="text" class="text-input--underbar width-full" id="nome" name="nome" placeholder="Nome">
</div>
<div class="form-row">
<input type="text" class="text-input--underbar width-full" id="email" name="email" placeholder="Email">
</div>
<div class="form-row">
<input type="password" class="text-input--underbar width-full" id="password" name="password" placeholder="Password">
</div>
<div class="form-row">
<input type="password" class="text-input--underbar width-full" id="repita_password" name="repita_password" placeholder="Repetir password">
</div>
<div class="vspc form-row">
<button id="btn_regista_user" style="background-color: #589397;" name="btn_regista_user" class="button button--large">Registar</button>
</div>
</div>
</form>
</ons-page>
</ons-template>
<ons-template id="recuperar_pass.html">
<link rel="stylesheet" href="css/registo.css">
<ons-page>
<ons-toolbar fixed-style style="background-color: #589397;">
<div class="left"><ons-back-button>Voltar</ons-back-button></div>
<div style="color: #ffffff; font-weight: 700;" class="center">Recuperação</div>
</ons-toolbar>
<form id="recuperar_pass_form" name="recuperar_pass_form" method="post" enctype="multipart/form-data" >
<input type="hidden" name="valida_recuperar_pass" id="valida_recuperar_pass" value="ok_recuperar_pass">
<div class="formarea">
<div class="form-row">
<div class="titulo_registo">Insira o email com que se registou e iremos lhe enviar um email com as informações para repor a sua password </div>
</div>
<div class="form-row">
<input type="text" class="text-input--underbar width-full" id="email_recuperar" name="email_recuperar" placeholder="Email" value="">
</div>
<div class="vspc form-row">
<button id="btn_recuperar_pass" style="background-color: #589397;" name="btn_recuperar_pass" class="button button--large">Repor password</button>
</div>
</div>
</form>
</ons-page>
</ons-template>
<ons-sliding-menu
main-page="home.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
<ons-template id="home.html">
<ons-page>
<ons-toolbar style="background-color: #589397;">
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; color: #ffffff; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="right">
<ons-toolbar-button id="botao_geolocation"><ons-icon icon="ion-location" style="font-size: 32px; color: #ffffff; width: 1em;"></ons-icon></ons-toolbar-button>
<ons-toolbar-button id="botao_pesquisa"><ons-icon icon="ion-search" style="font-size: 32px; color: #ffffff; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<ons-page>
<ons-toolbar fixed-style>
<div class="center">Encontre o que procura em SabeOnde</div>
</ons-toolbar>
<script src="js/categorias.js"></script>
<script src="js/modal.js"></script>
<ons-modal var="modal">
<ons-icon style="position: absolute; top: 0; left: 0; margin:10px 10px 10px 10px;" id="close" icon="ion-close-round"></ons-icon>
</ons-modal>
<div class="banner_home"></div>
<ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-cutlery"></ons-icon> Comer</ons-list-header>
<ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
<div id="mostra_categorias_comer"></div>
</ons-carousel>
<ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="ion-home"></ons-icon> Dormir</ons-list-header>
<ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
<div id="mostra_categorias_dormir"></div>
</ons-carousel>
<ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-shopping-cart"></ons-icon> Comprar</ons-list-header>
<ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
<div id="mostra_categorias_comprar"></div>
</ons-carousel>
<ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-wrench"></ons-icon> Serviços</ons-list-header>
<ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
<div id="mostra_categorias_servicos"></div>
</ons-carousel>
<ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-glass"></ons-icon> Bares</ons-list-header>
<ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
<div id="mostra_categorias_bares"></div>
</ons-carousel>
<ons-list-header style="margin-top:10px; padding: 5px 5px 5px 5px;"><ons-icon icon="fa fa-university"></ons-icon> Lazer</ons-list-header>
<ons-carousel swipeable style="margin-top: 5px; margin-bottom: 0px; height: 140px;" overscrollable auto-scroll item-width="140px">
<div id="mostra_categorias_lazer"></div>
</ons-carousel>
</ons-page>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 2</div>
</ons-toolbar>
<p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<div class="profile-card">
<img src="images/profile-image-01.png" class="profile-image">
<div class="profile-name">Dave Graham</div>
<div class="profile-id">@davegraham</div>
<div class="profile-desc">Freelance designer, software engineer and cyclist</div>
</div>
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('home.html', {closeMenu: true})">
<ons-icon icon="ion-home" style="font-size: 26px; width: 1em;"></ons-icon> Home
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('notificacoes.html', {closeMenu: true})">
<ons-icon icon="ion-android-notifications" style="font-size: 26px; width: 1em;"></ons-icon> Notificações
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('marcadores.html', {closeMenu: true})">
<ons-icon icon="ion-android-bookmark" style="font-size: 26px; width: 1em;"></ons-icon> Marcadores
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('fotos.html', {closeMenu: true})">
<ons-icon icon="ion-image" style="font-size: 26px; width: 1em;"></ons-icon> Fotos
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('visitado.html', {closeMenu: true})">
<ons-icon icon="ion-ios-location" style="font-size: 26px; width: 1em;"></ons-icon> Visitado
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('amigos.html', {closeMenu: true})">
<ons-icon icon="ion-ios-people" style="font-size: 26px; width: 1em;"></ons-icon> Encontrar amigos
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('definicoes.html', {closeMenu: true})">
<ons-icon icon="ion-gear-b" style="font-size: 26px; width: 1em;"></ons-icon> Preferências
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('logout.html', {closeMenu: true})">
<ons-icon icon="ion-power" style="font-size: 26px; width: 1em;"></ons-icon> Sair
</ons-list-item>
</ons-list>
</ons-template>