I recently tried creating an ionic side menu. I had a problem where when I swiped the main body it opened up the menu. But I took the swipe function off and now I can't open the menu. I want to be able to click the navicon icon to be able to open the menu but don't know how to do it.
Here is the JavaScript:
.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
Here is the header code which contains the button:
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<td-cards class="theLabel" id="card" ng-repeat="task in activeProject.tasks">
<td-card class="card-{{card.index}}">
<h4 style="text-align:center"> {{task.title}}</h4>
</td-card>
</td-cards>
Here is the menu content:
<ion-side-menu side="left">
<ion-pane ion-side-menu-content drag-content="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Cards</h1>
</ion-header-bar>
<ion-content scroll="true">
<edge-drag-threshold="true" drag-content="true">
</ion-content>
</ion-pane>
</ion-side-menus>
Ionic has a handy menu-toggle directive to use so you can toggle the menu on a button like this.
http://ionicframework.com/docs/api/directive/menuToggle/
<ion-header-bar class="bar-dark">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
In index.html, replace menu-toggle="left" with ng-click="toggleProjects()" and in app.js add this
$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};
Here is what I do:
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{ activeProject.title }}</h1>
</ion-header-bar>
In app.js, check with $ionicSideMenuDelegate.isOpen()
$scope.toggleSideMenu = function() {
if ($ionicSideMenuDelegate.isOpen()) {
$ionicSideMenuDelegate.toggleLeft(false); // close
} else {
$ionicSideMenuDelegate.toggleLeft(); // open
}
};
Related
I have a view with a simple button opening a modal in an Ionic+Angular app. And a modal template appearing correctly after the button is clicked:
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Popular tags</h1>
<div class="buttons">
<button class="button button-clear button-stable" ng-click="closePopularForm()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<div class="list">
<div class="item-divider text-center">
Select a tag to follow.
</div>
<label class="item">
<button class="button button-balanced" ng-click="addPopularTag('china')">China</button>
<button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button>
<button class="button button-balanced" ng-click="addPopularTag('us')">United States</button>
</label>
</div>
</ion-content>
</ion-modal-view>
As you can see the modal contains 3 buttons, each calling the same function but with different parameter. I have this controller containing the function:
app.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
$ionicModal.fromTemplateUrl('add-popular.html', { scope: $scope }).then(function(modal) {
$scope.modalPopular = modal;
});
$scope.closePopularForm = function() {
$scope.modalPopular.hide();
};
$scope.openPopularForm = function() {
$scope.modalPopular.show();
};
$scope.addPopularTag = function(poptag) {
console.log(poptag);
console.log('pop form submited '+poptag);
};
});
The problem is that whichever button is clicked in the modal, the function addPopularTag is called with the parameter of the first button (which is china in this case). I have checked the html source of the buttons and they are rendered correctly with different parameters.
Here is a reproduction of the issue in Codepen.
You can see it in the console.
Replace
<label class="item">
<button class="button button-balanced" ng-click="addPopularTag('china')">China</button>
<button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button>
<button class="button button-balanced" ng-click="addPopularTag('us')">United States</button>
</label>
with
<button class="button button-balanced" ng-click="addPopularTag('china')">China</button>
<button class="button button-balanced" ng-click="addPopularTag('uk')">United Kingdom</button>
<button class="button button-balanced" ng-click="addPopularTag('us')">United States</button>
I don't know what the label does though
I can't seem to make the side menu work. What happens is the that I can see the sidebar button, but the page content disappears and the button doesn't click to open anything.
here is my route.js
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('jobStore', {
url: '/homePage',
views:{
'userSettings':{
templateUrl:"templates/userSettings.html",
contoller: 'sideMenuCtrl'
}
}
})
here is my side menu, called userSettings.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item id="userSettings-list-item11" class=" ">Application</ion-item>
<ion-item id="userSettings-list-item12" class=" ">Dashboard</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
and my index.html
<div>
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-buttons side="left">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
I would like to achieve following effect in ionic framework. When i click on the arrow, the boxes will slide up as in the right. When i click the arrow or any other area except the text box, it will return to original position. It should be appearing under any view that have menu.html as abstract view. How could it be done? I try my first step as below but nothing is appear.
Plunkr here
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<!-- Nothing appear -->
<div style="position: fixed; bottom: 0; height: 200px;">Text here</div>
I am stuck with an issue in my ionic app that has a side menu with name and picture and it's parent and abstract:true. In that same controller, there is an update function where it updates scope.picture, but the side menu picture is not updated.
controller('AppCtrl', function($scope,$window,$rootScope,$location,$http,$state,$cordovaCamera,$ionicLoading,$q,login_Service)
{
$scope.user_Name=$rootScope.u_name;
$scope.uid=$rootScope.user_id;
$scope.pass=$rootScope.password;
$scope.user_Picture=$rootScope.pic;
$scope.whats=$rootScope.wh;
$scope.update_u=function(topic){
$scope.user_Picture=topic['picture'];
$scope.whats=topic['e_whats'];
}
});
this is side-menu template
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-light nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<!-- Sidebar Content -->
<ion-content class="gem-sidebar dark">
<!-- Profile Box - Extends ionic's .row -->
<div class="row gem-sidebar-profile-box">
<!-- Profile Thumb -->
<div class="col col-25">
<img src="img/gemionic/no-photo.jpg" ng-if="!user_Picture" class="gem-profile-image" alt="">
<img src="http://www.cssolutionshub.com/php/images/user_img/{{user_Picture}}" ng-if="user_Picture" class="gem-profile-image">
</div>
<!-- End Profile Thumb -->
<!-- Profile Name -->
<div class="col col-50">
<h6> <a menu-close href="#" ng-click="edit_prof()">Edit Profile</a></h6>
<h5 ng-if="user_Name !== undefined">{{user_Name}}</h5>
<h4>{{whats}}</h4>
</div>
<!-- End Profile Name <a -->
<!-- Account Settings Icon -->
<div class="col col-25 gem-text-center">
<i class="gem-profile-settings-icon ion-volume-high"></i>
</div>
<!-- End Account Settings Icon -->
</div>
<!-- End Profile Box -->
<!--<ion-list>
<ion-item class="item-ng-click" nav-clear menu-close ng-click="login()">Login</ion-item>
<ion-item nav-clear menu-close href="#/app/feed">Feed</ion-item>
<ion-item nav-clear menu-close href="#/app/start">Starter View</ion-item>
</ion-list> -->
</ion-content>
<!-- End sidemenu content -->
</ion-side-menu>
</ion-side-menus>
and this is my edit template where update function is clicked
<!-- Title for header bar (refer to www/index.html) -->
<ion-view title="Edit Profile">
<!-- ======================
LEFT SIDE BUTTON
====================== -->
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<!-- ======================
RIGHT SIDE BUTTON
====================== -->
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-checkmark-circled"></button>
</ion-nav-buttons>
<!-- ======================
MAIN CONTENT SECTION
====================== -->
<ion-content class="has-header gem-ion-content profile-edit">
<!-- ======================
GEMIONIC PROFILE ADD PICTURE BANNER
====================== -->
<!-- <div class="gem-profile-media">
<div class="gem-profile-details profile2">
<div class="text-center">
<i class="icon ion-plus-circled add-user-pic-icon"></i>
<p class="uppercase">Add user pic</p>
</div>
</div>
</div> -->
<img ng-if="topic.picture !== undefined && img===undefined " ng-src="http://www.cssolutionshub.com/php/images/user_img/{{topic.picture}}" alt="" width="100%" height="20%" ng-click="addMedia()">
<img ng-if="topic.picture === undefined && img===undefined" ng-src="img/gemionic/no-photo.jpg" width="100%" height="20%" ng-click="addMedia()">
<img src="{{img}}" ng-if="img!==undefined" width="100%" height="20%" ng-click="addMedia()">
<!-- ======================
END GEMIONIC PROFILE ADD PICTURE BANNER
====================== -->
<!-- Standard Ionic List -->
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">What Now</span>
<input type="text" ng-model="topic.whats">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="password" ng-model="topic.password">
</label>
<button class="button button-full button-positive" ng-click='update_u(topic)'>
Update
</button>
<button class="button button-full button-positive" ng-click='go_feed()'>
Cancel
</button>
</div>
</ion-content>
</ion-view>
Try the following:
$scope.update_u=function(topic){
$scope.whats = topic.whats;
$scope.user_Picture=topic['picture'];
}
You may try this (inside the AppCtrl). The code inside $ionicView.beforeEnter function will be executed everytime the view is called:
$scope.$on('$ionicView.beforeEnter', function () {
// Code you want executed every time view is opened
$scope.update_u=function(topic){
$scope.user_Picture=topic['picture'];
$scope.whats=topic['e_whats'];
}
}
This also may be due to caching of your controller. You can stop it at the route.js by using cache: false, line. See this for a similar solution:
When I click my newly created items in my list, once clicked, I want them to display on h1 the name of what's been added to my list. I'm not sure what's wrong, I thought I had followed this example pretty closely but I am not sure what is wrong or why it isn't being recognized when I call {{item}} in my templates/item.html script.
http://codepen.io/gnomeontherun/pen/EfKgJ
index.html
<ion-nav-bar class="bar-dark">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<!--NAV BAR CONTROLLER-->
<ion-view view-title="Home">
<div ng-controller="AppCtrl">
<ion-side-menus>
<!--TOP NAV BAR-->
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-icon button-clear">
<span class="icon ion-ios-arrow-left"></span>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-plus-round" ng-click="modal.show()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-content class="has-header">
</ion-nav-bar>
<ion-side-menu-content>
<br>
<br>
<ion-list>
<ion-item ng-repeat="contact in contacts" href="#/item">{{contact.name}}</ion-item>
</ion-list>
<!--TOP NAV BAR END-->
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<!--SIDE MENU CONTENT-->
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark">
</ion-header-bar>
<ion-content>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-ios-search"></i>
Search
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Inbox
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-eye"></i>
Watching
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Sellers
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#">
<i class="icon ion-ios-cart"></i>
Cart
<span class="badge badge-assertive">0</span>
</a>
</ion-list>
<ion-list>
<a class="item item-icon-left" href="#/sign-in">
<i class="icon ion-log-out"></i>
Logout
</a>
</ion-list>
</ion-content>
</ion-side-menu>
<!--END OF SIDE MENU CONTENT-->
</ion-side-menus>
</div>
</ion-view>
</script>
<script id="templates/home.html" type="text/ng-template">
<!--HOME PAGE-->
<ion-view view-title="Home">
</ion-view>
</script>
<script id="templates/modal.html" type="text/ng-template">
<!--ADD LISTING CONTROLLER-->
<ion-modal-view>
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">For Sale</h1>
<button class="button button-clear ion-close-round" ng-click="modal.hide()"></button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Designer</span>
<input ng-model="newUser.firstName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Product</span>
<input ng-model="newUser.lastName" type="text">
</label>
<label class="item item-input">
<span class="input-label">Price</span>
<input ng-model="newUser.email" type="text">
</label>
<button class="button button-full button-assertive" ng-click="createContact(newUser)">Create Listing</button>
</div>
</ion-content>
</ion-modal-view>
</script>
<script id="templates/item.html" type="text/ng-template">
<ion-view title="Listing">
<ion-content>
<h1>
{{item}}
CONTACT.NAME SUPPOSED TO BE HERE
</h1>
</ion-content>
</ion-view>
</script>
app.js
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
"use strict";
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})
.state('forgotpassword', {
url: '/forgot-password',
templateUrl: 'templates/forgot-password.html'
})
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('item', {
url: '/item',
controller: 'ItemCtrl',
templateUrl: 'templates/item.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
templateUrl: 'templates/home.html',
controller: 'HomeTabCtrl'
}
}
});
$urlRouterProvider.otherwise('/sign-in');
})
.controller('SignInCtrl', function($scope, $state) {
"use strict";
$scope.signIn = function(user) {
console.log('Sign-In', user);
$state.go('tabs.home');
};
})
.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate) {
"use strict";
console.log('HomeTabCtrl');
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('AppCtrl', function($scope, $ionicModal) {
"use strict";
$scope.contacts = [
{ name: 'Mike Freeman' },
{ name: 'Barney Calhoun' },
{ name: 'Lamarr the Headcrab' },
];
$ionicModal.fromTemplateUrl('templates/modal.html', {
animation: 'slide-in-up',
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$scope.openModal = function () {
$scope.modal.show();
};
$scope.form = {};
$scope.createContact = function(u) {
$scope.contacts.push({ name: u.firstName + ': ' + u.lastName + ' $' + u.email });
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
.controller('ItemCtrl', function($scope, $stateParams) {
"use strict";
$scope.item = $stateParams.item;
});