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>
Related
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'm trying to implement a side-bar on my app so I am able to store menu related options inside it, but my issue is that whenever I integrate the ion-side-bar-menu, it always hides my main content.
For example, Whenever I don't add the side bar directives in my code, everything works as fine, even when I'm using the ionic-header-bar directives. But whenever I wrap my header bar inside the side-menu, everything outside of it disappears. Its as if the side-menu pushes or overlaps all other existing content unless I remove it from the DOM.
Refer to the screenshots below. I should be seeing the content to the right of the side-menu:
Thank you!
http://codepen.io/JalenMoorer/pen/MaGVKV?editors=101#0
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<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" 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 menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue">
<h1>BLUE</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box pink">
<h1>PINK</h1>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</body>
</html>
You have to add the slide-box in an ion-content container & add the "has-header" class to it so that it can take the ion-nav-header into account. That said, here is the solution:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<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" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
<ion-content class="has-header">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue">
<h1>BLUE</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box pink">
<h1>PINK</h1>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</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 menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script>
angular.module('ionicApp', ['ionic', 'ngMaterial'])
.controller('MyCtrl', function ($scope) {
});
</script>
</body>
</html>
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;
});
I have created an app with Ionic side menu with tabs.
The menu appears if I use ionic v0.9.27 but it doesn't appear if the version is 1.0 and above.
Where am I going wrong ?
HTML Structure
<ion-nav-view>
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-view name="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left"> </ion-side-menu>
</ion-side-menus>
</ion-nav-view>
Working with 0.9.27
Plnrk : http://plnkr.co/edit/Sdsam9Tef0cy4bydbrxq?p=preview
Not working with 1.0
Plnrk : http://plnkr.co/edit/swWJph?p=preview
Working with 1.0 but with code embedded in html
Plnkr : http://plnkr.co/edit/ty6m8Q8DNQssZLKzOP8W?p=info
It's fascinating it even worked before.
This is how it should work: http://plnkr.co/edit/cmJYiT?p=preview
Side menu should be embedded into index.html, everything else should be separated into other files.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Ionic Framework Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body>
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item href="#/" menu-close>Home</ion-item>
<ion-item href="#/about" menu-close>About</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
tabs.html
<ion-view title="Home">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon="ion-gear-a" href="#/tab/settings">
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Sign-Out" icon="ion-log-out">
</ion-tab>
</ion-tabs>
</ion-view>
plus other pages.....
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
}
};