Recently, I tried creating an Ionic side menu. I want to make the side menu overlaying contact.
I do not want to push content, however.
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="ContentController">
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
</ion-side-menu-content>
</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
There is a fork for this
https://github.com/driftyco/ionic-ion-drawer
And the example on codepen.
http://codepen.io/Yuripetusko/pen/VYqRNg
As i know it has not been merged with the main repo so you have to bring in the file separately and then add it to the module
angular.module('ionicApp'['ionic','ionic.contrib.drawer'])
.controller('appCtrl', function($scope) {
});
Some other people have already requested this feature. http://forum.ionicframework.com/t/side-menu-overlaying-rather-than-pushing-center-content/4361
As of what I know there is no work around unless you wanted to rewrite the directive/animations for the side menu.
Try this one. This is exactly what you are looking for.
http://nlmd.vincurekf.cz/
Related
The example code for the ion-nav-view directive doesn't actually show its usage.
So I'm unsure how to use it.
Here is the link to the documentation:
http://ionicframework.com/docs/api/directive/ionNavView/
under the USAGE heading it says this:
on app start, $stateProvider will look at the url, see if it matches
the index state, and then try to load home.html into the
.
Pages are loaded by the URLs given. One simple way to create templates
in Angular is to put them directly into your HTML file and use the
syntax. So here is one way to put
home.html into our app:
<script id="home" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view view-title="Home">
<ion-content ng-controller="HomeCtrl">
<!-- The content of the page -->
Go to music page!
</ion-content>
</ion-view>
</script>
This is good to do because the template will be cached for very fast
loading, instead of having to fetch them from the network.
Do I nest all of that inside of an ion-nav-view directive? Another reason for my confusion is because in one of the ionic templates the framework provides I've seen ion-nav-view opened and closed with nothing in between it this (code below is copy and pasted directly from one of Ionic's templates) :
<body ng-app="myApp">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
This <ion-nav-view> behaves like a placeholder. Your other html files that you create under templates folder goes in there. So for example you then have "employees.html" in your templates folder. So the markup of "employees.html" will look something like this:
<ion-view view-title="Employees">
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items">
Hello, {{item}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
the above is complete html that will be sitting in "employees.html". Basically this is the html that will be placed inside <ion-nav-view> tags.
Hope this helps.
There are similar question but not this exact one. I have this structure in an ionic app view
<ion-view>
<ion-nav-title>
<a id="go_to_app" href="#startseite">
<span class="ion-android-exit"></span>
</a>
<img src="img/logo_header.png">
</ion-nav-title>
<ion-content class="star-wrap">
.
. contents
.
</ion-content class="star-wrap">
What I'm trying to achieve is show the ion-android-exit button instead of the menu button in this specific view.
Is this possible?
There was a (way) easy and simple way to do this.
Adding <ion-nav-buttons></ion-nav-buttons> inside <ion-view></ion-view> will rewrite the menu button with whatever I want, or just hide it with no contents.
You need to use ng-if like in example here.
http://codepen.io/anon/pen/AXkJGa
after setting the value of ng conditional to true in the controller.
Example HTML
<title>Ionic Modal</title>
<body ng-controller="State1Ctrl">
<ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-title>
<a id="go_to_app" href="#startseite">
<span class="ion-android-exit" ng-if="!hidethisview"></span>
</a>
</ion-nav-title>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
</ion-nav-bar>
And JS
angular.module('ionicApp', ['ionic'])
.controller('State1Ctrl', function($scope, $state) {
if($state.current.name=="")// you need to have your state name inside quotes
//this example don't have one
{
$scope.hidethisview=true;
}
});
I want to load a new view when a certain button is pressed. The view that loads should not show a back button to the previous page.
Back Button code:
<ion-nav-bar class="bar bar-header ionBarM " align-title="left">
<ion-nav-title >
<a ui-sref="app.feed" ng-click="getEList()" > BACK<i class="pull-left ion-chevron-left"></i></a>
</ion-nav-title>
On your <ion-view> add the hide-back-button attribute: <ion-view hide-back-button="true">
The functionality is clearly explained in the official documentation for ion-view: http://ionicframework.com/docs/api/directive/ionView/
For latest Ionic versions try using
<ion-navbar hideBackButton >
This should work.
After updating an existing Ionic project from 1.13-beta to 1.14-beta I've experienced some behaviour I can't explain. When changing from one viewstate to another, the old view doesn't leave the page. Upon logging both angular ui router events and Ionic navigation events I've noticed Ionic's Exit Events aren't fired:
$ionicView.leave
$ionicView.beforeLeave
$ionicView.afterLeave
Documentation: (http://ionicframework.com/blog/navigating-the-changes/)
Has anyone else experienced similar behaviour? If so, have you found any way to resolve this?
Events Fired:
$stateChangeStart: App.LoadApp.Input -> App.Main.QrToken
$viewContentLoading: Main
$viewContentLoading: QrToken
$stateChangeSuccess: App.LoadApp.Input -> App.Main.QrToken
$ionicView.beforeEnter
$ionicView.afterEnter
$ionicView.enter
I can load in the QrToken view if I Don't nest it inside Main, so I believe the problem lie there. Can anyone take a look at my Main Template and help me find a solution.
<div ng-controller="fbMenuController">
<ion-side-menus>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content scroll="true">
<div ng-repeat="Group in fb.Model.MenuGroups">
<ion-item class="item-divider">{{Group.Name}}</ion-item>
<!-- href="#/Main/{{Page.Name}}" -->
<a ng-repeat="Page in Group.Items" nav-transition="android" nav-direction="swap" class="item" ng-click="fb.SelectPage(Page.State)">
{{ Page.Name }}
</a>
</div>
</ion-content>
</ion-side-menu>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark" ng-show="fb.Model.ShowHeader">
<div class="buttons">
<button class="button-icon icon ion-navicon" ng-click="fb.ToggleLeftMenu()"></button>
</div>
<h1 class="title">{{ fb.Model.ActivePage.Name }}</h1>
</ion-header-bar>
<ion-content scroll="true">
<ion-nav-view name="Main">
</ion-nav-view>
</ion-content>
</ion-side-menu-content>
</ion-side-menus>
</div>
If your view is wrapped in a tab using <ion-tab>, you need to register for $ionicNavView-Events:
$scope.$on("$ionicNavView.leave")
This is an open issue https://github.com/driftyco/ionic/issues/2869 and probably occurs when view-cache="false".
On my case $ionicView.leave worked in nested views but not when moving between tabs nor did $ionicParentView.leave so I came around it with another solution.
Solution:
On MAIN controller I added:
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (fromState.name === 'name-of-leaving-state') {
//your code here, similar behavior with .$on('$ionicView.leave')
}
});
Hope it helps
I had this problem the other day. I was listening for the event on my child controllers. When I moved the listener to the parent, it worked. I wasn't quite sure why, but now I think I know why. It's because of the way Ionic caches the views. Specifically this line from the docs:
If a view leaves but is cached, then this event will not fire again on
a subsequent viewing.
It's likely that your views were cached before you added the listener and the leave event never fired. But since your parent is... well... the parent, its leave event is triggered any time you leave any of its children. I haven't officially tested this, it's just a hunch. To test, try telling ionic to not cache the view by adding cache-view="false" to your ion-view declaration.
See docs here.
Found the problem. The 'Main' state was defined without the attribute
abstract: true
this worked in Ionic 1.13-beta but Aparently breaks in Ionic 1.14-beta. Didn't find this change in any of the migration posts on either Ionic, AngularJS or Angular-ui-router, so I don't know why this solved it. If anyone can elaborate more on the behavior in this situation, I'd be grateful but for now I have a solution.
I know this is quite old, however i wanted to add that on Ionic v1.3.4 (the last version) the $ionicView.beforeEnter && $ionicView.afterEnter all work. I mention this because others have commented that v1.3.x was having issues with controller views for .beforeEnter and .afterEnter. But I don’t ever recall having issues on any version of 1.3.x.
That being said, I came to this thread because I am updating an older ionic v1 app and ran into a problem where the $ionicView.beforeEnter was not firing and I could not figure out why. It turns out the template that goes with that controller was missing closing HTML tags on a few <i class="icon> elements…I didn’t add the closing </i>
Thus, apparently, certain elements missing a closing tag was preventing the controller $ionicView.beforeEnter/afterEnter functions from firing. Don't know if its all tags or specific tags but I can say I had NEVER seen that before so it took me a while to figure out the issue was in my template and not in my controller.
For what its worth, hope my discovery helps those in the future.
I've got this strange behaviour.
In my index.html I declared:
<body>
<ion-nav-view></ion-nav-view>
</body>
Then in my page.html I used the followin markup:
<ion-view title="Purchases" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content> ... </ion-content>
</ion-view>
The view correctly set a button to toggle side menu, but also, automatically, create a header:
<ion-nav-bar class="bar-stable nav-title-slide-ios7 bar bar-header nav-bar disable-user-behavior">
How can I change its styles? For instance: I would like to set it as a "bar-energized".
I also tried to insert, in index.html above , the following markup (amany examples show), but it does not seem to work (nav bar header remains grey):
<ion-nav-bar class="bar-energized nav-title-slide-ios7"></ion-nav-bar>
The only way it seems working is by declaring and buttons inside each and every
Just realized it was really a newbie question! I was starting from a Ionic sidemenu template, and the misterious "bar-stable" was declared inside "ion-pane ion-side-menu-content" in my menu.html file.
Hope it may helps someone other!