How to set this in separate in onsen ui framework?

How to set this in separate in onsen ui framework? - angularjs

How can i manage when i am click on the submit the button the show me the sliding menu only show after submit menu not show the front page how can manage it .???? using onsen ui and angularjs
Main Page
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center" >
<ons-icon icon="user"> Login</ons-icon>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item >
<input type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item>
<input type="password" placeholder="E-Mail Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
<div class="content-padded" align="center" style="margin-top:10px;">
<ons-button modifier="medium"
onclick="myNavigator.pushPage('dashboard.html', { animation : 'slide' } )"> Submit </ons-button>
<ons-button modifier="medium"
onclick="myNavigator.pushPage('forgot_password.html', { animation : 'slide' } )"> Forgot Password </ons-button>
</div>
</ons-page>
</ons-navigator>
This is Sliding menu
<ons-sliding-menu
menu-page="dashboard.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="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
Home
</ons-list-item>
<!-- <ons-toolbar modifier="transparent">sss</ons-toolbar>-->
<ons-list-header>From Demo Real Estate</ons-list-header>
<ons-list class="bottom-menu-list">
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
Search Residential
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page4.html', {closeMenu: true})">
<ons-icon icon="fa-search"></ons-icon> Search Commercial
</ons-list-item>
<ons-list-header>From Demo Real Estate</ons-list-header>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-user"></ons-icon>
Login or Register
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-book"></ons-icon>
About Us
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-phone"></ons-icon>
Feedback
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-edit"></ons-icon>
Sell/Rent Property
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
Help me!!!!!!!!!!
and thanx in advance ..:)
This is my Hole Code
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Navigator</title>
<link rel='stylesheet prefetch' href='http://onsenui.io/OnsenUI/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='http://onsenui.io/OnsenUI/build/css/onsen-css-components.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center" >
<ons-icon icon="user"> Login</ons-icon>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item >
<input type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item>
<input type="password" placeholder="E-Mail Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
<div class="content-padded" align="center" style="margin-top:10px;">
<ons-button modifier="medium"
onclick="myNavigator.pushPage('dashboard.html', { animation : 'slide' } )"> Submit </ons-button>
<ons-button modifier="medium"
onclick="myNavigator.pushPage('forgot_password.html', { animation : 'slide' } )"> Forgot Password </ons-button>
</div>
<p align="center">Don't Have the account? Please <a onclick="myNavigator.pushPage('register.html', { animation : 'slide' } )" href="" style="text-decoration:none; color:#4282CC"> Register Here</a></p>
</ons-page>
</ons-navigator>
<ons-template id="register.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Register</div>
</ons-toolbar>
<div style="text-align: center"> <br />
<ons-page>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Email Address" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;">
</ons-list-item>
<ons-list-item>
<input type="text" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item>
<ons-row>
<ons-col width="90px"> <span style="color: #666">Gender</span> </ons-col>
<ons-col>
<div style="float: right; padding-right: 16px;">
<label class="radio-button">
<input type="radio" name="level">
<div class="radio-button__checkmark"></div>
Male
</label>
<label class="radio-button">
<input type="radio" name="level">
<div class="radio-button__checkmark"></div>
Female
</label>
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<div class="content-padded">
<ons-button modifier="large" onclick=""> Sign Up </ons-button>
</div>
</ons-page>
</div>
</ons-page>
</ons-template>
<ons-template id="forgot_password.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Forgot Password</div>
</ons-toolbar>
<ons-page>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Email Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
<div class="content-padded">
<ons-button modifier="large" onclick=""> Forgot Password</ons-button>
</div>
</ons-page>
</ons-page>
</ons-template>
<!-- =========================== Dashboard Front Pannel ========================================-->
<ons-template id="dashboard.html">
<ons-page>
<ons-toolbar>
<div class="center">
<ons-icon icon="user"> Dashboard</ons-icon>
</div>
</ons-toolbar>
<ons-page >
<div class="content-padded" >
<ons-button modifier="large">
<div align="left">Latest Shipment List</div>
</ons-button>
</div>
<table id="responsive-example-table" class="large-only bordare" cellspacing="2" cellpadding="5" width="98%" style="margin:10px;" >
<tbody>
<tr align="center">
<th>#</th>
<th>AWB NO</th>
<th>Origin</th>
<th>Destination</th>
<th>Pickup Date</th>
<th>Dilvery Date</th>
<th>Status</th>
<th>Print Lable</th>
</tr>
<tr align="center">
<td>01</td>
<td>10000252</td>
<td>Bikaner</td>
<td>Japur</td>
<td>10-5-2015</td>
<td>10-5-2015</td>
<td><span class="col_bg_yellow"> Pickup Scheduled </span></td>
<td align="center"><i class="fa fa-print"></i></td>
</tr>
<tr class="dark_tabl" align="center">
<td>02</td>
<td>10000252</td>
<td>Bikaner</td>
<td>Japur</td>
<td>10-5-2015</td>
<td>10-5-2015</td>
<td><span class="col_bg_yellow"> Pickup Scheduled </span></td>
<td align="center"><i class="fa fa-print"></i></td>
</tr>
</tbody>
</table>
<div class="content-padded" >
<ons-button modifier="large">
<div align="left">Latest Booking List</div>
</ons-button>
</div>
<table id="responsive-example-table" class="large-only bordare" cellspacing="2" cellpadding="5" width="98%" style="margin:10px;">
<tbody align="center">
<tr align="center">
<th>#</th>
<th>AWB NO</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Origin</th>
<th>Destination</th>
<th>Service</th>
<th>Product/Type</th>
<th>Pay Status</th>
<th>Action</th>
</tr>
<tr align="center">
<td>01</td>
<td>10000252</td>
<td>XKXCZN</td>
<td>10-5-2015</td>
<td>Rangareddy</td>
<td>Prakasam</td>
<td>Normal service</td>
<td>Parcel</td>
<td><span class="col_bg_green"> PAID </span></td>
<td><i class="fa fa-search"></i> <i class="fa fa-list-alt"></i> <i class="fa fa-print"></i></td>
</tr>
<tr class="dark_tabl" align="center">
<td>02</td>
<td>10000252</td>
<td>XKXCZN</td>
<td>10-5-2015</td>
<td>Rangareddy</td>
<td>Prakasam</td>
<td>Normal service</td>
<td>Parcel</td>
<td><span class="col_bg_red"> DUE </span></td>
<td><i class="fa fa-search"></i> <i class="fa fa-list-alt"></i> <i class="fa fa-print"></i></td>
</tr>
</tbody>
</table>
</ons-page>
</ons-page>
</ons-template>
<!--============================================================================================-->
<!-- =======================================VIEW DETAILS FOR BOOKING =============================-->
<ons-template id="booking_view.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">TRACKING RESULT FOR AWB# {{users.slip_no}}</div>
</ons-toolbar>
<table cellspacing="2" cellpadding="2" width="100%" style="margin:10px;" >
<tr>
<td><b>Payment Status</b></td>
<td><ons-button modifier="cta">Pending</ons-button></td>
</tr>
<tr >
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > SHIPMENT DETAILS:<span>{{users.delivered}}</span> </ons-button>
</div></td>
</tr>
<tr>
<td><b>Schedule Delivery</b> {{user.origin}}</td>
<td>{{users.expected_date | date: 'fullDate'}}, By End Of Day</td>
<td><b>Last Location</b></td>
<td>{{users.origin}}</td>
</tr>
<tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > DIMENSION DETAILS: </ons-button>
</div></td>
</tr>
<tr>
<td><b>Origin</b></td>
<td>{{users.origin}}</td>
<td><b>Destination</b></td>
<td>{{users.destination}}</td>
</tr>
<tr>
<td><b>Service</b></td>
<td>{{users.service_id}}</td>
<td><b>Shipped/Billed On</b></td>
<td>{{users.pickup_date | date: 'fullDate'}}</td>
</tr>
<tr>
<td><b>Type</b></td>
<td>{{users.nrd}}</td>
<td><b>Weight</b></td>
<td>{{users.weight}}KG</td>
</tr>
<tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > SHIPPER DETAILS : </ons-button>
</div></td>
</tr>
<tr>
<td><b>Name</b></td>
<td>{{users.sender_name}}</td>
<td><b>Address</b></td>
<td>{{users.sender_address}}</td>
</tr>
<tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > CONSINGER DETAILS : </ons-button>
</div></td>
</tr>
<tr>
<td><b>Name</b></td>
<td>{{users.reciever_name}}</td>
<td><b>Address</b></td>
<td>{{users.reciever_address}}</td>
</tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > OTHER PARCEL DETAILS : </ons-button>
</div></td>
</tr>
<tr>
<td><b>Name</b></td>
<td>{{users.reciever_name}}</td>
<td><b>Address</b></td>
<td>{{users.reciever_address}}</td>
</tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > PAYEMENT DETAILS : </ons-button>
</div></td>
</tr>
<tr>
<td><b>Total Amount</b></td>
<td>{{users.reciever_name}}</td>
</tr>
<td><b>Tax(3.9%)</b></td>
<td>{{users.reciever_name}}</td>
</tr> <td><b>Net Amount</b></td>
<td>{{users.reciever_name}}</td>
</tr>
</table>
</ons-page>
</ons-template>
<!--============================================================================================-->
<!--============================== 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="bottom-menu-item" ng-click="myNavigator.resetToPage('page-with-menu.html'), {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
Home
</ons-list-item>
<ons-list-header>From Demo Real Estate</ons-list-header>
<ons-list class="bottom-menu-list">
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
Search Residential
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page4.html', {closeMenu: true})">
<ons-icon icon="fa-search"></ons-icon> Search Commercial
</ons-list-item>
<ons-list-header>From Demo Real Estate</ons-list-header>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-user"></ons-icon>
Login or Register
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-book"></ons-icon>
About Us
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-phone"></ons-icon>
Feedback
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-edit"></ons-icon>
Sell/Rent Property
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<!--============================================================================================-->
<script src='http://onsenui.io/OnsenUI/build/js/angular/angular.js'></script><script src='http://onsenui.io/OnsenUI/build/js/onsenui.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Related

Tab bar makes the page unclickable

When i add a ons-tabbar to my page it overlaps my entire page so that i can't click on anything except the tabs itself.
My page looks like the following (each page has it own html file):
<ons-page>
<ons-tabbar>
<label class="tab-bar__item">
<input type="radio" name="tab-bar-a" checked="checked">
<button class="tab-bar__button">
<i class="tab-bar__icon fa fa-dashboard"></i>
<div class="tab-bar__label">Dashboard</div>
</button>
</label>
<label class="tab-bar__item" ng-click="myNav.pushPage('views/device-settings.html', {animation : 'slide'})">
<button class="tab-bar__button">
<i class="tab-bar__icon fa fa-cogs"></i>
<div class="tab-bar__label">Settings</div>
</button>
</label>
</ons-tabbar>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Device</div>
</ons-toolbar>
<ons-list id="device">
<ons-list-item>
<label class="checkbox">
<input type="checkbox" checked="checked">
<div class="checkbox__checkmark"></div>
Switch 1
</label>
<div class="switch-detail">
<ons-icon icon="fa-calendar"></ons-icon>
Last enabled: 9 February 2016 on 17:39
</div>
</ons-list-item>
<ons-list-item>
<label class="checkbox">
<input type="checkbox" checked="checked">
<div class="checkbox__checkmark"></div>
Switch 2
</label>
<div class="switch-detail">
<ons-icon icon="fa-calendar"></ons-icon>
Last enabled: 9 February 2016 on 17:39
</div>
</ons-list-item>
<ons-list-item>
<label class="checkbox">
<input type="checkbox" checked="checked">
<div class="checkbox__checkmark"></div>
Switch 3
</label>
<div class="switch-detail">
<ons-icon icon="fa-calendar"></ons-icon>
Last enabled: 9 February 2016 on 17:39
</div>
</ons-list-item>
</ons-list>

Don't implement ons-tabbar like that, use the following syntax:
<ons-tabbar>
<ons-tab>tab1</ons-tab>
<ons-tab>tab2</ons-tab>
</ons-tabbar>
Also, try to implement the ons-tabbar outside ons-page and link the single ons-tab to the relative page (using ons-template):
<ons-tabbar>
<ons-tab page="home.html" active="true">
<ons-icon icon="ion-home"></ons-icon>
<span style="font-size: 14px">Home</span>
</ons-tab>
<ons-tab page="fav.html" active="true">
<ons-icon icon="ion-star"></ons-icon>
<span style="font-size: 14px">Favorites</span>
</ons-tab>
<ons-tab page="settings.html" active="true">
<ons-icon icon="ion-gear-a"></ons-icon>
<span style="font-size: 14px">Settings</span>
</ons-tab>
</ons-tabbar>
<ons-template id="home.html>
<ons-page>
PAGE CONTENT
</ons-page>
</ons-template>
Here is a working CodePen example, based on your code:
http://codepen.io/andipavllo/pen/rxQEeY
Hope it helps!

ons-tabbar has children of kind ons-tab. You give the content of the lower tabbar icon array as a content and have to give the content of the page as an parameter id of page="ID".
<ons-tabbar var="tabbar" animation="fade">
<ons-tab
active="true"
icon="ion-chatbox-working"
label="Comments"
page="page1.html">
</ons-tab>
<ons-tab
icon="ion-ios-cog"
label="Settings"
page="page2.html">
</ons-tab>
</ons-tabbar>
<ons-template id="page1.html" >
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
</ons-template>
<ons-template id="page2.html" >
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
</ons-template>
Here is some working codePen:
http://codepen.io/anon/pen/yeQdMX

Modal input form inactive in Onsenui

I have a form input field and a button inside a modal and for some reason they both are inactive. If I try to click them I can not enter any text into the field or the button doesnt do anything. All fields and buttons work fine on the page and all my other pages, but dont work correctly in my modals.
Modal
<ons-modal var="modalSample" ng-controller="SampleController">
<ons-navigator var="nav3" page="sample">
</ons-navigator>
</ons-modal>
<ons-template id="sample">
<ons-page>
<ons-tabbar position="top">
<ons-row>
<ons-col width="15%">
<div style="margin-top:15px"><i class="ion ion-arrow-left-c" ng-click="modalSample.hide()"></i></div>
</ons-col>
<ons-col width="45%" align="left">
<div style="padding-top:18px;color:#fff;">Sample Groups</div>
</ons-col>
<ons-col width="20%" align="left">
</ons-col>
</ons-row>
</ons-tabbar>
<ons-row style="padding-top:145px">
<ons-col>
<input type="text" id="stufxx" placeholder="test"/>
<ons-button modifier="large" class="login-button" ng-click="alert('heelo')" style="background:#ccc">Test button</ons-button>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
Rest of page
<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="90%" type="reveal" side="left">
</ons-sliding-menu>
<ons-template id="menux.html">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.closeMenu()" style="padding-top:2em;padding-bottom:3.5em;">
<ons-row >
<ons-col width="20%" align="left">
<img src="img/profile.png" width="30" class="profilex"/>
</ons-col>
<ons-col width="80%" align="left">
Andrew
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('tags.html', {param1: 'bla'});menu.closeMenu()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-barcode-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right" >Tags</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="modalSample.show()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-pie-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Sample Groups</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('apps.html', {param1: 'bla'});menu.closeMenu()" style="border-bottom:1px solid #ddd">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-paper-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Apps</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('settings.html', {param1: 'bla'});menu.closeMenu()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-cog-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Settings</span>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-page ng-controller="LoginController">
<ons-tabbar position="top">
<ons-tabbar-item style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" onclick="menu.toggleMenu()"></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="negative.html" icon="ion-android-walk"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</ons-navigator>
</ons-template>

I am a bit confused as to why you would have a navigator in a modal, but I did a codepen that has inputs and buttons in it which works. Please see this codepen:
http://codepen.io/anon/pen/qbGQrN
The modal is just simply this:
<ons-modal var="modal">
<ons-button onclick="alert('It Works! Input - '+document.getElementById('myInput').value);modal.hide();">Button</ons-button>
<input type="text" id="myInput"/>
</ons-modal>

OnsenUI - Multiple templates in one file : templates showing at the bottom

I'm developing a mobile app with cordova and onsenui.
I have a issue with defining multiple pages in single HTML.
Here's my HTML :
<ons-page ng-controller="accountController">
<ons-tabbar>
<ons-tab page="profile.html" label="Profil" icon="ion-person" active="true"></ons-tab>
<ons-tab page="filters.html" label="Filtres" icon="ion-android-options"></ons-tab>
<ons-tab page="settings.html" label="Paramètres" icon="ion-gear-a"></ons-tab>
</ons-tabbar>
</ons-page>
<ons-template id="profile.html">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Mon profil</div>
<div class="right">
<ons-toolbar-button ng-click="saveAccount()">
<ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<ons-row>
<ons-col size="30%">
<img src="res/dev/person.png" style="max-height: inherit; max-width: inherit;" />
</ons-col>
<ons-col size="70%">
<label>{{ data.shortname }}</label>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item>
<input type="text" ng-model="data.firstname" placeholder="Prénom"
class="text-input text-input--transparent"
style="margin-top:8px; width: 100%;"
autocapitalize="on" autocomplete="on"
spellcheck="false" autocorrect="off" cb-before="Prénom" />
</ons-list-item>
<ons-list-item>
<input type="text" ng-model="data.lastname" placeholder="Nom de famille"
class="text-input text-input--transparent"
style="margin-top:8px; width: 100%;"
autocapitalize="on" autocomplete="on"
spellcheck="false" autocorrect="off" cb-before="Nom de famille"/>
</ons-list-item>
</ons-list>
</ons-template>
<ons-template id="filters.html">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Mes filtres</div>
<div class="right">
<ons-toolbar-button ng-click="saveAccount()">
<ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
Filtres
</ons-list-item>
</ons-list>
</ons-template>
<ons-template id="settings.html">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Paramètres</div>
<div class="right">
<ons-toolbar-button ng-click="saveAccount()">
<ons-icon icon="ion-android-done" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
Email : {{ data.email }}
</ons-list-item>
<ons-list-item>
<input type="text" ng-model="data.pwd" placeholder="Mot de passe" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
</ons-template>
So the objective here is to have a tab page, with 3 tabs.
It's working, but the templates still displaying at the bottom of the page, not rendered :
I found out that I can use <script type="text/ons-template" id="profile.html"> in place of <ons-template id="profile.html">, but then I get an error saying that it cannot find the template.
I also found out that I can use <script type="text/ng-template" (...)>. That's working.
Also, I could just define each template in a separate file, but then I'd be having a LOT of files (it's not the only file where I get that problem).
So my questions are : am I doing it wrong ? Is there anybody out there who had the same problem, and solved it ?
Thanks for your help ;)

How do I use multiple html files with onsen & use the sliding menu?

I am trying to use multiple files for pages. However, I also want to use the sliding menu. I read here that to use multiple files with Onsen you just remove <ons-template>. I understand this, but I can't get the sliding menu to work with it. Here is what I have.
<body>
<ons-sliding-menu side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
<div class="menu">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('index.php', {closeMenu: true})">
<ons-icon icon="fa-plus" fixed-width="true"></ons-icon>
Today's Meals
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('other.php', {closeMenu: true})">
<ons-icon icon="fa-bookmark" fixed-width="true"></ons-icon>
Some other Page
</ons-list-item>
</ons-list>
</ons-page>
</div>
</ons-sliding-menu>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Today's Meals</div>
<div class="right weight">277.4 LBS</div>
</ons-toolbar>
<ons-list class="plan-list">
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date">7:00 AM</div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 1</div>
<div class="plan-info">
<ul>
<li>2 Chicken Breasts</li>
<li>Blueberries</li>
<li>Side Salad with Ranch</li>
</ul>
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 2</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 3</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 4</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</body>
I am not using this with cordova or phonegap. I am just using this as a framework for a mobile web page.
Thank you!

You just need to wrap the menu page and the main page with <ons-template> like this:
<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page>
...
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-page>
...
</ons-page>
</ons-template>
Hope it helps!

Onsen UI menu.toggle() is not working after adding navigator with sliding menu

I want to add a page before my sliding menu page. I succeeded to accomplish that. But, now I can't access menu.toggle();
I logged the menu object, that says undefined. And I've also tried navi.menu but that also doesn't seem to work. This is the closest solution I've got but no menu.toggle
Onsen UI - Using Slide-Menu just for specifics pages here is my code
<ons-navigator title="Navigation" var="navi" page="homePage.html">
</ons-navigator>
<ons-template id="homePage.html">
<ons-page ng-controller="mainPageController">
<ons-toolbar>
<div class="center">PHPTRAVELS</div>
<div class="right">
<ons-toolbar-button>Exit</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row class="home-page">
<ons-col>
<ons-list>
<ons-list-item modifier="tappable"
style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[2].status"
ng-click="navi.pushPage('home.html')">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-building" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Hotels</div>
<div class="description">Find the perfect hotel room</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[6].status || modules[7].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-plane" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Flights</div>
<div class="description">Get the best flight</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[3].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-briefcase" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Tours</div>
<div class="description">Your vacation awaits</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[1].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-car" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Cars</div>
<div class="description">Seek a deal on wheels</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[0].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-leanpub" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Blog</div>
<div class="description">Travel news portal</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
<ons-sliding-menu
menu-page="menu.html" main-page="home.html" side="left"
var="menu" type="reveal" max-slide-distance="260px">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<br><br>
<ons-list class="menu-list">
<ons-list-item menuitem class="menu-item selected" ng-click="menu.setMainPage('home.html', {closeMenu: true});">
<i class="glyphicon glyphicon-home"></i>
Home
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true});">
<i class="glyphicon glyphicon-calendar"></i>
Browse Hotels
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true});">
<i class="glyphicon glyphicon-gift"></i>
Special Offers
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('blog.html', {closeMenu: true});">
<i class="glyphicon glyphicon-th-list"></i>
Blog
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('mybookings.html', {closeMenu: true});">
<i class="glyphicon glyphicon-user"></i>
My Bookings
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('contactus.html', {closeMenu: true});">
<i class="glyphicon glyphicon-map-marker"></i>
Contact Us
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="home.html">
<!-- <ons-navigator var="nav"> -->
<ons-page ng-controller="homeController">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle();">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center text-center">PHPTRAVELS</div>
<div class="right">
<ons-toolbar-button>
<!-- <ons-icon icon="refresh" size="30px" spin="{{isFetching}}" fixed-width="true"></ons-icon> -->
<ons-icon icon="ion-load-c" ng-show="isFetching" spin="{{isFetching}}"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div>some text</div>
</ons-page>
</ons-template>

The methods toggle(), open() and close() for the sliding menu are deprecated.
You can use the toggleMenu([options]) method instead: http://onsen.io/reference/ons-sliding-menu.html#method-toggleMenu
It seems like you want a page before the sliding menu so I made a small example:
http://codepen.io/argelius/pen/XJOQwy