I have an application that at the root does not require any ion-side-menus. However, there is one view that does require an ion-side-menu.
For instance, take a restaurant. You may list a bunch of options on the home view (menu, contact, map), but when you click menu you move to a view that list options for breakfast, lunch and dinner. Instead of taking the user to a new view, you'd like to slide out a menu when the user clicks breakfast with all your options.
I was able to implement this quite well, using Android as my development target. However when switching to iPhone, the view completely stops rendering at all!
Below is the ion-view I'm using:
<ion-view view-title="Menu">
<ion-content>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-list>
<ion-item ng-repeat="meal in vm.meals" ng-click="vm.onMealClick(meal.name)">
{{meal.name}}
</ion-item>
</ion-list>
</ion-side-menu-content>
<ion-side-menu side="right">
<div class="item item-button-left">
{{vm.selectedMeal}}
<button class="button button-clear button-small" menu-close>
<i class="icon ion-close"></i>
</button>
</div>
<ion-list>
<ion-item>Eggs</ion-item>
<ion-item>Cereal</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
</ion-content>
And this is the menu toggle binding:
var vm = this;
vm.onMealClick = onMealClick;
function onMealClick(meal) {
vm.selectedMeal = meal;
$ionicSideMenuDelegate.toggleRight();
};
Does anyone know of issues using ion-side-menus inside of an ion-view? In my real application, this provides an extremely organized user-experience, so it's something I'd like to keep pursuing and not change the layout to accommodate.
Thanks for any and all help.
Related
I have an application that work in LTR or RTL mode, and im trying to update the menu to reflect the direction, so this is what i did:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="{{ (is_rtl) ? 'right' : 'left' }}">
<button menu-toggle="{{ (is_rtl) ? 'right' : 'left' }}" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
...
</ion-content>
</ion-view>
And the is_rtl is the variable set in the controller to know the direction. The problem is this does not have any effect. It appears that ionic does not parse the variable in the side part. Entering right or left manually works fine, but doesnt look it can work dynamically like. I even tried ng-if with no luck:
<ion-view id="home" hide-back-button="true">
<ion-nav-title>
<img ng-src="{{logo_path}}" class="header-logo"/>
</ion-nav-title>
<ion-nav-buttons side="left" ng-if="!is_rtl">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right" ng-if="is_rtl">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
How can I solve this?
Thanks.
Update 1
I noticed The second try using ng-if partially works, but only if i navigated to a screen and returned back to the home screen, it does not work on initial load.
Just a quick note, the ion-nav-buttons directive must be the first descendant of the ion-view for it to work. From the docs:
Note that ion-nav-buttons must be immediate descendants of the
ion-view or ion-nav-bar element (basically, don’t wrap it in another
div).
It looks from the source code the side attribute is not being interpolated so no matter what you do, it'll always resolve to the html you pass. This is the snippet from their compile function
var side = 'left';
if (/^primary|secondary|right$/i.test(tAttrs.side || '')) {
side = tAttrs.side.toLowerCase();
}
Meaning that tAttrs.side will equal to "{{is_rtl}}" and not the actual boolean value.
Also it looks like ng-[if|show] will not work here because the lifecycle of the directive is being handled by the $ionNavBarController on init.
In short it looks like your feature with ion-nav-button isn't possible at the moment. However you might be able to pull it off by setting the nav-bar hidden with <ion-view hide-nav-bar="true"> and then set your controls in a custom ion-header-bar like this:
<ion-header-bar>
<div class="buttons" ng-class="{'buttons-right': is_rtl}">
<span ng-class="{'right-buttons': is_rtl}">
<button class="button button-clear">
Right button block
</button>
</span>
</div>
</ion-header-bar>
I'm writing a canvas app and the canvas resides in my main view. On orientation change, I'd like to hide the header and footer.
I can't use a new view, because it would wipe out the canvas element (or at least hide it), and I'd have to re-run a bunch of graphics initialization code. Instead, I just resize the canvas to match the horizontal phone dimensions.
So, when the phone is horizontal I need to hide the header and footer of my view. Any ideas?
EDIT
So you can hide the footer with an ng-show. The same is not true of the header, which I'm still stuck on.
Here is a copy of my view:
<ion-view title="My Title">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header has-footer" id="testCanvas" overflow-scroll="true" on-scroll="scroll()">
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive" style="padding-bottom: 60px;">
<div class="button-bar">
<button class="button icon-left ion-ios7-cloud-upload-outline" ng-click="go('save')">Save</button>
<button class="button icon-left ion-ios7-folder-outline" ng-click="go('load')">Load</button>
<button class="button icon-left ion-ios7-play-outline" ng-click="play()">Play</button>
</div>
</ion-footer-bar>
</ion-view>
So, adding the following attribute to your ion-view will hide the bar, and then removing the class "has-header" from ion-content will move your content upwards.
<ion-view hide-nav-bar="true"></ion-view>
However, it doesn't look like you can do this dynamically. i.e.:
<ion-view hide-nav-bar="{{hide}}"></ion-view>
...doesn't work. I'd welcome any thoughts on how to make it dynamic.
*I already answered the question about removing the footer bar in the edit
I have three cases:
1.- If I use item-remove-animate (it animates the delete action) and ui-sref (it makes the item clickable to send the user to another view), when I delete an item, it gets deleted but also, the ui-sref redirect is triggered.
2.- If I remove the animation class 'item-remove-animate", it works as I expect, the item is deleted and I'm still on the same view. The problem is that the items are deleted instantly, I would like to conserve the animation.
3.- If I remove the ui-sref, the animation works as expected but I lose the redirect.
Here it is the complete view I'm using, in the first case:
HTML:
<ion-view title="Bimbo Keepers">
<ion-nav-buttons side="left"><a ng-click="onShowDeleteIcons()" ng-if="reportes.length" class="button button-icon icon ion-minus-circled"></a></ion-nav-buttons>
<ion-content padding="true" class="has-bottom-icons">
<div class="row">
<h1>Enviados</h1>
</div>
<ion-list show-delete="data.showDelete">
<ion-item ng-repeat="reporte in reportes.slice().reverse()" type="item-text-wrap" ui-sref="tab.detail-enviados({id: reporte.id})" class="item-thumbnail-left item-icon-right item-remove-animate item item-complex item-left-editable item-right-editable">
<ion-delete-button ng-click="onReporteDelete(reporte)" class="ion-minus-circled"></ion-delete-button>
<img ng-src="{{ reporte.imagen1_base64 }}"/>
<h2>Reporte No: {{reporte.id}}</h2>
<p>Envíado el {{reporte.fecha}}</p><i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
<div ng-if="!reportes.length" class="container">
<p>No has enviado reportes. Desde la pantalla de Reportes Guardados, utiliza el botón sincronizar.</p>
</div>
</ion-content>
</ion-view>
Here it is a CodePen:
http://codepen.io/jdsampayo/pen/QbLggv
Any help will be appreciated to conserve the animation.
Use the $event object in onReporteDelete function and stop event bubbling by using stopPropagation.
Updated codepen
hope this helps.
Try using event.preventdefault() - that might fix your problem. However, if you can provide a jsbin link, it will be better to debug the problem.
Use the event.preventDefault() in the ondelete function that you have.
I cannot figure out how to get the back button to show when navigating away from a tabbed view to a single page view. The single page view shouldn't have the tab bar. I can make the back button appear when I make the view I'm navigating to part of the tab hierarchy, but that's not what I want.
I've been looking around and can't seem to find a post on this issue. I just might not be searching for the right keywords.
My set up is this...
tabs: tab.feed, tab.friends, tab.account
other view: randompage
Here is my route set up...
.state('randompage', {
url:'/randompage',
templateUrl: 'templates/randompage.html',
controller: 'RandomPageCtrl'
})
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'TabCtrl'
})
.state('tab.feed', {
url: '/feed',
views: {
'tab-feed': {
templateUrl: 'templates/tab-feed.html',
controller: 'FeedCtrl'
}
}
})
Here is the tabs.html
<ion-tabs class="tabs-icon-top tabs-top">
<!-- Feed Tab -->
<ion-tab title="Feed" icon="icon ion-ios7-paper" href="#/tab/feed">
<ion-nav-view name="tab-feed"></ion-nav-view>
</ion-tab>
<!-- The rest are just from the tab skeleton -->
<ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
<ion-nav-view name="tab-friends"></ion-nav-view>
</ion-tab>
<ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
Here is the tab-feed.html
<ion-view title="Feed">
<ion-nav-buttons side="right">
<a class="button button-icon ion-android-camera" href="#/randompage"></a>
</ion-nav-buttons>
<ion-content class="padding">
<h1>Feed</h1>
</ion-content>
</ion-view>
Here is the randompage.html
<ion-view title="Random Page">
<ion-content lass="padding">
</ion-content>
</ion-view>
Everything navigates and shows correctly except the back button is not showing.
Please let me know if you know of any alternate solution, possibly what I may be doing wrong, or need more information.
Thanks!
This has been a long time problem for me as well. While the history stack is broken in this use case, 'backView' in the history object is correct. The full history object can be seen with this log line:
console.log( JSON.stringify($ionicHistory.viewHistory(), null, 4) );
My solution is to manually add in a Back button on global pages.
Global page html:
<ion-view view-title="Help">
<ion-nav-buttons side="left">
<button class="button button-clear" ng-click="goBack()"><i class="icon ion-arrow-left-c" ></i> Back</button>
</ion-nav-buttons>
Javascript:
$scope.goBack = function() {
$ionicHistory.goBack();
};
Another alternative is to modify the ionic source. Replace enabledBack() in ionic.bundle.js with this:
enabledBack: function(view) {
//original code
//var backView = getBackView(view);
//return !!(backView && backView.historyId === view.historyId);
//new code to show back
var backView = viewHistory.backView;
return backView != null;
},
I have the same issue. By check the source code, ionic sets up an default history stack named root history, views are pushed and popped from the stack as user navigate through the app. However, the tab view is taken out of this default history stack and a new stack will be setup for it.
splash view --> tab view --> random page (out of tab)
|
tab1 --> nested view (in tab)
|
tab2 --> nested view (in tab)
root history stack:
splash view ---> random page
tab history stack:
tab view ---> tab1 --> nested view
---> tab2 --> nested view
I couldn't find an easy way to change this behavior. But there's a workaround work for my case. I created a normal ionic view and composed the tab view by myself so no new history stack will be created.
<ion-view title="tabs">
<ion-content padding="false">
<ion-pane>
<ion-nav-view name="tab-content"></ion-nav-view>
</ion-pane>
<div class="tabs tabs-icon-top" style="position: absolute;bottom: 0;">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</ion-content>
</ion-view>
then you can set up your $stateProvider to load different tab view into tab-content to mimics the ion-tabs behavior. Of course you have to maintain the active states of tabs by yourself.
I am sorry I don't have enough reputation to add a comment.
Ryan's answer worked like a charm for me(not the modify ionic source part), I just want to add a point that if one uses
ng-click="$ionicGoBack()"
instead of
ng-click="goBack()"
the Javascript can be omitted.
I'm all new to Ionic, and this is my first project. I'm creating a little app with tab navigation in the bottom.
One tab view looks like this:
<ion-view title="Account">
<ion-content class="has-header padding">
<h1>Account</h1>
</ion-content>
</ion-view>
I want to add a button in the header next to Account, and according to documentation you use the ion-nav-bar elements, but no button shows up when I try this. Can anyone give me a clue how to add buttons in the header, in a tab view?
You can make use of ion-nav-button like this:
<ion-view title="Account">
<ion-nav-buttons side="left">
<button class="button" ng-click="doSomething()">
I'm a button on the left of the navbar!
</button>
</ion-nav-buttons>
<ion-content class="has-header padding">
<h1>Account</h1>
</ion-content>
</ion-view>
Example 1
Example 2