button click event not working when side menu is open ionic - angularjs

I have created a cordova ionic app with side menu. By default, I need to keep side menu open. When I click on a button on page, it doesn't work. I have click twice on the page. First time when i click on button, side menu closes, then i have to click on button again to perform the operation. How can i make it work even if the side menu is open.
SideMenu.html
<ion-side-menus enable-menu-with-back-views="false" class="menu-page">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left" >
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" class="left-nav">
<ion-content scroll="false" has-bouncing="false">
<div class="user-info text-center">
</div>
<ion-list>
<a class="item item-icon-left" menu-close ui-sref="app.menuscreen" ui-sref-active="selected">
<i class="ion-home"></i><span>Home</span>
</a>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/sidemenu.html',
})
.state('app.menuscreen', {
url: '/menuscreen',
views: {
'menuContent': {
templateUrl: 'templates/menuscreen.html',
}
}
})
MenuScreen.html
<ion-view>
<ion-content has-bouncing="false">
<div class="button-box">
<h2>Would you like to?</h2>
<!--Button-->
<div class="btn-box">
<div class="btn-parent-box">
<div class="icon">
<i class="ion-ios-plus-outline"></i>
</div>
<button class="button button-full btn-orange" type="submit"
ui-sref="newjob" title="New Job">New Job</button>
<div class="clearfix"></div>
</div>
</div>
<!--/button-->
</div>
</ion-content>
</ion-view>

Instead of using menu-close better to user menu-toggle="left" / menu-toggle="right" based on your menu have and you can use that button event for some code. What all you have to do is,
<button class="button button-full btn-orange" type="submit" menu-toggle="left" ui-sref="newjob" title="New Job">New Job</button>
in the menu, what ever so called list is add
menu-toggle="left".
that's it. And you can able to perform all operation.
If correct vote for it.

Related

AngularJS ng-show - 2 Times, 2 different results

I am creating an app with angularjs, cordova and iconic.
I have a trash icon which should be show only when the user is at the main page.
So i will show the icon only wenn the rootScope.Trashicon is true.
It works fine in my sidemenu. But in the side-menu-content area it doesnt work. I dont know why...
<ion-side-menus ng-controller="MainController" ng-init="getListTitle()">
<ion-side-menu side = "left"> <!-- expose-aside-when DELETE IT !!!!!! -->
<header><img src="img/todo_today_logo_small.png"></header>
<div id="sideContent" class="item item-divider">ToDo Liste:
<p>
> <a menu-close href="#/todo">{{sideMenuListTitle}}</a>
</p>
<div ng-show="Trashicon">test</div>
<h3></h3>
</div>
<div>
<ul>
<li><a menu-close href="#/impressum">Impressum</a></li>
<li><a menu-close href="#/datenschutzerklaerung">Datenschutzerklärung</a></li>
</ul>
</div>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-bar class="custom-dark" align-title="center">
<ion-nav-buttons side="left">
<!-- Toggle left side menu -->
<button menu-toggle="left" class="button button-icon icon ion-navicon light"></button>
</ion-nav-buttons>
<div ng-show="Trashicon">
<ion-nav-buttons side="right">
<button ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
<ion-nav-title></ion-nav-title>
</ion-nav-bar>
<div ng-view="" class="container"></div>
</ion-side-menu-content>
</ion-side-menus>
This is my rootScope Variable
.controller('MainController', function ($scope, $ionicPopup, $rootScope) {
$rootScope.Trashicon = false;
The div with the trash icon is still visible.. and i dont know why... it would be great if someone has an idea for me.
It seams the element ion-nav-buttons has its own styling which overrides all elements above it.
If you move the ng-show closer the button you will have better control.
i.e instead of
<div ng-show="Trashicon">
<ion-nav-buttons side="right">
<button ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
do this
<div>
<ion-nav-buttons side="right">
<button ng-show="Trashicon" ng-click="deleteProducts()" class="button button-icon ion-ios-trash-outline pull-right light"></button>
</ion-nav-buttons>
</div>
If i try ng-show="1==2" it will work only in the side menu too....
and not in the side menu content area.. the div will show if ng-show="1==2"... strange

ionic 1 - selected option from sidemenu not displaying in its parent view

1) Main page is index.html
2) By default, Using router config i redirect to login page - template/login.html
3) From login page, if login successful, i will redirect to the home page with sidemenu - template/landing.html
4) In homepage, when i click the hamburger icon, i get sidemenu with options
5) But when i click an option in sidemenu, for example "updateProfile" template/updateProfile.html , i'm not able to see the corresponding updateProfile page in homepage
i tried making changes in config, but i'm not making any progress. kindly help me out.
Below is my code.
index.html
<body ng-app="myapp">
<ion-nav-view></ion-nav-view>
</body>
template/login.html
<ion-view view-title="Sign in">
<ion-nav-bar class="bar-stable">
</ion-nav-bar>
<ion-content>
<input type="text" placeholder="#handle" ng-model="userName" />
<button class="button button-block button-positive" ng-click="signIn()">Sign in</button>
</ion-content>
</ion-view>
app.js
app.controller('LoginController',function($scope,$state){
$state.go('landing');
};
});
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('login',{
url : '/',
templateUrl : 'template/login.html',
controller : 'LoginController',
cache : false
});
$stateProvider.state('landing',{
url : '/landing',
templateUrl : 'template/landing.html',
controller : 'LandingController'
}).state('landing.updateProfile', {
url: "/updateProfile",
views: {
'menuContent' : {
templateUrl: "template/updateProfile.html"
}
}
});
$urlRouterProvider.otherwise('/');
});
template/landing.html
<ion-view view-title="Landing">
<ion-nav-bar class="bar-stable">
</ion-nav-bar>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon button-clear ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable"><h4>Do your thing</h4></ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/updateProfile">Update Profile</ion-item>
<ion-item menu-close href="#/yourDishes">Your Events</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
template/updateProfile.html
<ion-view view-title="Update Profile">
<ion-content>
update profile
</ion-content>
</ion-view>
i got the issue fixed.
in template/landing.html href should be of below format, only then it will match the corresponding url mentioned in the config function.
<ion-item menu-close href="#/landing/updateProfile">Update Profile</ion-item>
<ion-item menu-close href="#/landing/yourDishes">Your Events</ion-item>

Page with side menu does not show properly

I am making an ionic app and I am trying to create a home page with side menu, but it does not show properly. I ve seen multiple examples and I tried to do exactly the same steps, without success. The problem is that the ion-nav-buttons on the main menu and the ion-header-bar in the side menu do not show.
This is the home.html:
<ion-side-menus enable-menu-with-back-views="true">
<!-- Left Menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ui-sref="">Test 1</ion-item>
<ion-item ui-sref="">Test 2</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<!-- Main Menu -->
<ion-side-menu-content>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button-icon icon ion-email"></button>
</ion-nav-buttons>
<ion-nav-view name="homeContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
This is the menu-content.html:
<ion-view style="" title="Home">
<ion-content padding="true">
<label style="" class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search" type="search">
</label>
<br>
<ion-list style="">
<ion-item style="" ui-sref="ad">Ad 1</ion-item>
<ion-item style="" ui-sref="ad">Ad 2</ion-item>
<ion-item style="" ui-sref="ad">Ad 3</ion-item>
</ion-list>
</ion-content>
</ion-view>
These are the states inside the route.js:
.state('home', {
url: '/home',
abstract:true,
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('home.menu-content', {
url: '/home-menu-content',
views: {
'homeContent' :{
templateUrl: 'templates/home-menu-content.html',
controller : 'HomeMenuCtrl'
}
}
})
and these are the controllers:
.controller('HomeCtrl', function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('HomeMenuCtrl', function ($scope) {
})
This is the home.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" data-menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item data-menu-close href="#/app/home">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
This is the menu-content.html
<ion-view style="" title="Home">
<ion-content padding="true">
<label style="" class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search" type="search">
</label>
<br>
<ion-list style="">
<ion-item style="" ui-sref="ad">Ad 1</ion-item>
<ion-item style="" ui-sref="ad">Ad 2</ion-item>
<ion-item style="" ui-sref="ad">Ad 3</ion-item>
</ion-list>
</ion-content>
</ion-view>
These are the states inside the app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/home.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home-menu-content.html',
controller: 'HomeMenuCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
and these are the controllers:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('HomeMenuCtrl', function ($scope, $ionicModal, $timeout) {
})
Its works fine.Tested
I found the problem to this and it was very simple. I had to create an <ion-nav-bar> for the main menu. The <nav-buttons> were not showing in the main header bar of my project. Now, the snippet for the main menu is this:
<!-- Main Menu -->
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button-icon icon ion-email"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="homeContent"></ion-nav-view>
</ion-side-menu-content>

Back button is missing on child state in AngularJS's Ionic Framework

I have issue is my back button is not showing in detail page, after navigating it from tab. I have my states like
$stateProvider
.state('poets', {abstract: true, url: '/poets', templateUrl: 'views/poets/index.html'})
.state('poets.list', {url: '/poet-list', views: {'poets-list': {templateUrl: 'views/poets/poet.list.html', controller: 'PoetCtrl'}}})
.state('poets.popular', {url: '/poet-popular', views: {'poets-popular': {templateUrl: 'views/poets/poet.popular.html', controller: 'PoetPopularCtrl'}}})
.state('poets-detail', {url: '/poets/detail/:itemId', templateUrl: 'views/poets/detail.html', controller: 'PoetDetailCtrl'})
'poets.popular' & 'poets.popular' are two tabs both are navigating to detail page. I would like to add back button on my detail page so that, it navigate back to the previous state.
index.html
<ion-view>
<ion-tabs class="tabs-striped tabs-color-balanced tabs-icon-left">
<ion-tab icon="ion-home" title="All Poets" href="#/poets/poet-list">
<ion-nav-view name="poets-list"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-home" title="Popular" href="#/poets/poet-popular">
<ion-nav-view name="poets-popular"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
poet.list.html or poet.popular.html are almost same, I have written single as.
<ion-view title="Poets">
<ion-nav-buttons side="primary">
<button class="button button-icon" menu-toggle="left"><i class="icon ion-navicon"></i></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button ng-click="popover.show($event)" class="button button-icon"><i class="icon ion-more"></i></button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<ion-item href="#/poets/detail/{{item.id}}" class="item-icon-right item item-text-wrap"
ng-repeat="item in data" type="item-link">
<h2>{{item.name}}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!end" on-infinite="fetchMore()"></ion-infinite-scroll>
</ion-content>
</ion-view>
detail.html
<ion-view view-title="{{data.name}}">
<ion-nav-bar class="bar bar-balanced">
<ion-nav-back-button class="button-clear"><i class="ion-arrow-left-a"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="primary">
<button class="button button-icon" menu-toggle="left"><i class="icon ion-navicon"></i></button>
</ion-nav-buttons>
<ion-content>
....
</ion-content>
</ion-view>

$ionicScrollDelegate not working in ion-side-menu angualrjs

I am currently working on $ionicScrollDelegate in my mobile app. My objectives is when the user click the header bar, it will scroll to top automatically.The problem I have right now is when I include the ion-side-menu in my code, the $ionicScrollDelegate cannot scroll back, I created a button which it returns their position, but cannot scroll back. I am trying to figure out why $ionicScrollDelegate cannot scroll back to top when I included the side menu but when I removed the side menu, the $ionicScrollDelegate seems to work fine and it can scroll back to top.
Working code - without ion-side-menu
<ion-view>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Details </h1>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
Load More
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
<ion-view>
Not working - With side menu
<ion-view>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Expenses Details</h1>
<a class="button button-icon ion-plus-round" href="#/addExpensesForm"></a>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
Load More
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</header>
<ion-list>
<ul class="list">
<a ui-sref="tabs.home" class="item">Home</a>
<a ui-sref="about" class="item">About</a>
<a ui-sref="tabs.setting" class="item">Settings</a>
</ul>
</ion-side-menu>
</ion-side-menus>
</ion-view>
In My controller, I have
$scope.scrollListToTop = function () {
var result = $ionicScrollDelegate.$getByHandle('mainContent').getScrollPosition();
alert('Result:' + result.top + " " + result.left);
//$ionicScrollDelegate._instances[2].scrollTop();
}
It may be related to your markup structure.
Both the links below suggest that ion-side-menu-content should contain an ion-nav-bar then an ion-nav-view
https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html and http://mcgivery.com/understanding-ionics-side-menu/
Switching that around and putting your ion-content in there may give you back control.
Drop us a codepen or similar if not.

Resources