Say I am on the third page, sNavigator.getPages() shows there are 3 pages on the list.
Opening the menu and choosing a menu item will empty sNavigator.getPages(), so the problem is that when I click back btn, I am supposed to return to the last page, but instead, I am returned to main page.
Why the pages are deleted, and how to keep them as a new pages?
My code:
<ons-sliding-menu main-page="home.html" menu-page="menu.html" side="left" var="menu" close-on-tap type="overlay" >
</ons-sliding-menu>
<script type="text/ons-template" id="menu.html">
<ons-page modifier="menu-page">
<div class="profile-pic-wrap">...
Related
I have a navigator and global splitter in my app. My navigator pushes my first page as tempHome and i need set page attribute for splitter also tempHome to use the splitter.
<ons-navigator id="myNavigator">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item tappable>
test
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
</ons-splitter>
</ons-page>
</ons-navigator>
so I have twice tempHome in the first page of my app.
Is there any help?
Thank you
The codepen which you mentioned shows a splitter inside a navigator.
However both the navigator and splitter can contain inner pages - so in your case what you want to do is just change the structure the other way around. Since you want to have the side menu always that just means that it should be outside the navigator.
You can put the navigator inside the ons-splitter-content and you will get the desired result.
<ons-splitter>
<ons-splitter-side collapse swipeable>
// menu content...
</ons-splitter-side>
<ons-splitter-content>
<ons-navigator id="myNavigator" page="home.html"></ons-navigator>
</ons-splitter-content>
</ons-splitter>
Here's a modified Demo.
Sidenote: I just modified the example from the codepen which you mentioned, so it's actually using angular, however do note that for Onsen 2 angular is not a required :)
<ons-navigator id="myNavigator">
<ons-page>
<ons-splitter>
<ons-splitter-side id="menu" side="right" width="220px" swipe-target-width="150px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item tappable>
test
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="tempHome"></ons-splitter-content>
</ons-splitter>
</ons-page>
that's my first question so I´m afraid to be a silly one but I have done a lot of research before and spend many ours trying to fix this by changing the code. I´m relatively new to web app programming and maybe missing some conceptual knowledge that can be blocking me to go forward.
Environment and tools: Using cordova, onsen ui, Android studio, angularjs to develop a sort of Engineer Calculator on my area of expertise, I´m not a professional programmer.
The app is based in a series of pages connected as in the below user data/page flow and the app is working fine except for the problem I´m asking for help.
(I cant post images yet)
It's a dataflow like this:
menu.html >> page1.html >> load.html
For every html page view I have a controller module, all modules in the same controller file. The sliding menu defined in the index.html calls the page1.html for instance, that is the only page having a SVG graphic than linked to load.html page through a onclick Push page. See below the pages code:
menu.html
<body onload="onLoad()" ng-app="calcfcc" ng-controller="calcfccController">
<!-- to transfer to AS start here -->
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="200px" swipable="true">
</ons-sliding-menu>
<!-- sliding-menu - Menu list here!!! -->
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-toolbar modifier="transparent"></ons-toolbar>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
{{menu1}}
</ons-list-item>
page1.html called from slide menu:
<ons-navigator animation="slide" var="page1navi">
<ons-page ng-controller="initController" on-device-backbutton="backbuttonpage()" style="background: #001a00;">
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button id="popoverb1" ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
{{pageheader1}}
</div>
<div class="right" style="padding: 7px;">
<img src="img/AASis78x31branco.png" alt="AASis" >
</div>
</ons-toolbar>
page1.html portion that calls load.html from a clickable SVG icon:
<g
id="g4533"
onclick="page1navi.pushPage('load.html', { animation : 'slide' } )"
transform="translate(0,-66.958368)">
<rect
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient4485);fill-opacity:1;fill-rule:evenodd;stroke:#6e6e6e;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
id="rect10449"
width="60"
height="60"
x="275.33713"
y="786.85248"
rx="6.7857499"
ry="6.3835001" />
load.html page:
<ons-page ng-controller="loadController">
<ons-toolbar>
<div class="left"><ons-back-button>{{about1}}</ons-back-button></div>
</ons-toolbar>
<p class="textarea" style="font-size: 20px; border: 2px solid #0066FF; margin: 5px">
{{load1}}
</p>
So my problem is that page1.html controller is loading fine, load.html controller is also loading fine and making it's job but when a press the load.html page "back" button to return to page1.html the page1 controller is not loaded and I cant refresh the view with data I have manipulated on load.html.
It's not about global vars, is just that the right controller is not loaded.
When a called page1.html from index.html it works, but I can ask the user to get back to side menu just to refresh. Also reload all is not a option, very annoying to the user.
Any idea how to solve this?
TKS in advanced!!!!
Controllers are only run once when the page is created. When you use back-button you are destroying load.html and moving back to page1.html, but this one was already created in the page stack so its controller won't be called again. Also, AngularJS will only recognize changes if they are done inside Angular's scope. Otherwise you will need to use $scope.$apply() to let Angular know about the changes. You could use $scope.$apply() on Onsen UI's postpop event.
In any case, if you are using AngularJS I think you should have ng-click instead of onclick. Also, you can bind the text-area to a scope variable using ng-model, so every change you do in the view will be stored automatically. I think it should be enough with these two changes.
Hope it helps!
I have an ionic modal window which serves as setting's menu
plan is to use the modal with a small header and inside the content use the ion-tabs directive in a simple manner that each click shows and hide's a div
I've read the docs saying that they have a bug related to using the tabs inside a ion-content, so im aware of it.
how then can i achieve this funcionallity, if i remove the ion-content than the tabs directive is being pushed down instead of showing on top of the screen, here is the markup for the modal:
<ion-modal-view>
<ion-header-bar style="background-color: #40863E">
<h1 class="title" style="color:white;">My Account</h1>
<div class="button button-clear" ng-click="closeModal()"><span class="icon ion-close"></span></div>
</ion-header-bar>
<ion-content>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Message" icon-on=" ion-android-chat" icon-off="ion-ios7-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="Payment History" icon-on="ion-social-usd" icon-off="ion-ios7-clock-outline" on-select="showPayments()">
</ion-tab>
<ion-tab title="Edit" icon-on="ion-android-settings" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
<ion-tab title="Sign Out" icon-on="ion-log-out" icon-off="ion-ios7-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
<div id="payments" class="row" style="margin-top:43px;height:51px;">
some payments content
</div>
</ion-content>
</ion-modal-view>
*UPDATE
adding a picture to describe the problem
Try to use ion-pane instead of ion-content.
Remove the <ion-content> tag and then you can use CSS to push the top of the tabs down. ionContent is good about knowing when a header is used, but it does have some issues when ionTabs are inside. Something like the following, but you might need to use a more specific CSS selector.
.tabs { margin-top: 44px; }
I am developing a mobile app with phonegap and onsen ui.
There are ons-sliding-menu and ons-split-view which works fine separately.
My desire behaviour is showing menu-bar-button when the device is portrait and showing the menu when is on mobile landscape or tablet any orientation.
I have combine them like this
<ons-sliding-menu var="app.slidingMenu"
main-page="main.html"
menu-page="menu.html"
side="left"
type="push"
max-slide-distance="250px"
>
</ons-sliding-menu>
<ons-split-view var="app.splitView"
secondary-page="menu.html"
main-page="main.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
....
and this for showing menu-bar-button and toggling menu
<ons-template id="main.html">
<ons-navigator>
<ons-page>
<ons-toolbar fixed-style>
<div class="left">
<ons-toolbar-button ng-click="ons.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
</div>
<div class="center">xxx</div>
</ons-toolbar>
but when I add splitview the sliding-menu-button is not working at all.
Is there any best practice for combining them together?
You can use the ons-if-orientation directive to switch between the split view and the sliding menu.
<div ons-if-orientation="landscape">
<ons-split-view
secondary-page="menu.html"
main-page="main.html"
main-page-width="70%"
collapse="portrait">
</ons-split-view>
</div>
<div ons-if-orientation="portrait">
<ons-sliding-menu
max-slide-distance="200px"
menu-page="menu.html"
main-page="main.html">
</ons-sliding-menu>
</div>
There is a big problem with this approach though. There is actually two DOM trees for the menu and two DOM trees for the main page. So if you make some change to the DOM you will have to do it in two places in order for the pages to be in sync.
Try it out here:
http://codepen.io/argelius/pen/XJdabG
The sliding menu template has a button on the toolbar that opens the side menu (shows it). The same menu (I mean appearance) is used in the split view example app. In this case there is no menu button on the toolbar, but the menu, even in the portait view, can be open by swiping right. Why not allow a user to open the menu from a button? Unfortunately there's no toggleMenu() method for the object. There is however openMenu() method but it doesn't work if used from code. My example code is:
<ons-split-view
secondary-page="secondary.html"
main-page="page1.html"
main-page-width="70%"
collapse="portrait"
var="menu">
</ons-split-view>
<script type="text/ons-template" id="page1.html">
<ons-page class="center">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.openMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
</ons-page>
</script>
Could you please me to achieve the effect of opening the menu by clicking on a button?
Raf
Ok, I've found it... ons.splitView.toggle() - it opens/closes the menu.