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;
});
Related
I have the following scenario:
I would like to filter a list and this list is in a different ion-content because i want the search bar to be fixed.
Now the ng.model from the input isn't accessable in the other ion-content. What can I do?
This is my code:
<ion-view>
<ion-content class="no-bgColor" scroll="false" padding="false">
<label class="item item-input">
<span class="input-label">Suche</span>
<input type="text" ng-model="searchBox.storeName">
</label>
</ion-content>
<ion-content class="has-header">
<div class="card-elem animated zoomIn" ng-repeat="cat in myData | filter:searchBox track by cat.storeName">
<h1>{{cat.storeName}}</h1>
<p ng-if="d == 1">Heute: {{cat.openingHours[0]}}</p>
<p ng-if="d == 2">Heute: {{cat.openingHours[1]}}</p>
<p ng-if="d == 3">Heute: {{cat.openingHours[2]}}</p>
<p ng-if="d == 4">Heute: {{cat.openingHours[3]}}</p>
<p ng-if="d == 5">Heute: {{cat.openingHours[4]}}</p>
<p ng-if="d == 6">Heute: {{cat.openingHours[5]}}</p>
<p ng-if="d == 0">Heute: {{cat.openingHours[6]}}</p>
<br>
<h2 ng-click="showAlert(cat.openingHours[0],cat.openingHours[1],cat.openingHours[2],cat.openingHours[3],cat.openingHours[4],cat.openingHours[5],cat.openingHours[6])">Alle Öffnungszeiten</h2>
</div>
</ion-content>
<a href="#home"><div class="bar bar-footer bar-balanced">
<div class="title">Zurück</div>
</div></a>
</ion-view>
just initialize this $scope.searchBox = { storeName: '' }; or $scope.searchBox = { }; in your controller
working example
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
//initialize with a empty value
$scope.searchBox = { };
$scope.stooges = [{
name: 'Moe'
}, {
name: 'Larry'
}, {
name: 'Curly'
}];
});
.bg-smoke,
.bg-smoke label {
background-color: #fafafa;
}
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp">
<div ng-controller="AppCtrl">
<ion-view title="Home">
<ion-header-bar class="bar-stable">
<h1 class="title">Search By Name</h1>
</ion-header-bar>
<ion-content class="bg-smoke" scroll="false" padding="false">
<label class="item item-input">
<span class="input-label">Search</span>
<input type="text" ng-model="searchBox.name">
</label>
</ion-content>
<ion-content class="has-header has-subheader">
<ion-list>
<ion-item ng-repeat="stooge in stooges | filter:searchBox track by stooge.name" href="#">{{stooge.name}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
</div>
</div>
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'm new to ionic; I want to pass variables between two states, please guide me on how to do it.
I have setup a codepen example.
I want when items are left clicked (say item1, item2) move to view cart page and show id of clicked item.
Below is attached my code:
angular.module('ionicApp.controllers', [])
.controller('Tab1Ctrl', function($scope){
})
.controller('Tab2Ctrl', function($scope){
})
.controller('Tab3Ctrl', function($scope){
});
.btn-footer .button { margin: 0; }
.btn-footer .row { padding: 0; }
.btn-footer .col { padding: 0 5px; }
.img-box img { max-width: 100%; }
.p0 { padding: 0; }
.tabs-top-my .tab-nav.tabs { top: 0; }
.my-content-tabs > .row { height: 100%; }
.my-content-tabs .col-25,.my-content-tabs .col-20 { position:relative;}
.img-box {
height: 100%;
max-height: 100%;
position: absolute;
left: 0;
}
#maincontainer > div.scroll{padding-left:10px;}
.my-imgs-scroll { height: 100%; overflow:hidden !important; overflow-y:scroll !important; }
ion-scroll > div.scroll > img{ border-bottom:1px solid #eee;}
<!DOCTYPE html>
<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 page</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="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//fabricjs.com/lib/fabric_with_gestures.js"></script>
</head>
<body ng-controller="HomeTabCtrl">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-view animation="slide-left-right"> </ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<div class="list">
<a class="item item-icon-left" href="#"><i class="icon ion-email"></i> Check mail</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-chatbubble-working"></i>Call Ma</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album</a>
<a class="item item-icon-left" href="#"> <i class="icon ion-person-stalker"></i> Friends</a>
</div>
</ion-side-menu>
</ion-side-menus>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-striped tabs-positive tabs-top tabs-top-my tabs-icon-only" animation="fade-in-out">
<ion-tab title="tab1" icon="ion-home" href="#/tab/tab1">
<ion-nav-view name="tab1-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab2" icon="ion-home" href="#/tab/tab2">
<ion-nav-view name="tab2-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab3" icon="ion-home" ui-sref="tabs.tab3">
<ion-nav-view name="tab3-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab4" icon="ion-home" ui-sref="tabs.tab4">
<ion-nav-view name="tab4-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab5" icon="ion-home" ui-sref="tabs.tab5">
<ion-nav-view name="tab5-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="tab6" icon="ion-android-apps" ng-click="toggleRightSideMenu()" ui-sref="tabs.tab6">
<ion-nav-view name="tab6-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-footer-bar class="bar-footer btn-footer bar-light">
<div class="row">
<div class="col">
<button class="button button-block button-positive" ng-click='next()'> View cart Page </button>
</div>
<div class="col">
<button class="button button-block button-calm"> View checkout page </button>
</div>
</div>
</ion-footer-bar>
</script>
<script id="templates/tab1.html" type="text/ng-template">
<ion-view view-title="tab1">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer">
<div id="1" style="height=:40px"> Item 1</div>
<hr/>
<div id="2" style="height=:40px"> Item 2</div>
<hr/>
<div id="3" style="height=:40px"> Item 3</div>
</ion-scroll>
</div>
</div>
<div class="col col-50" id="canvascontainer">
tab 1
</div>
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer1">
</ion-scroll>
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab2.html" type="text/ng-template">
<ion-view view-title="tab2">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer">
</ion-scroll>
</div>
</div>
<div class="col col-50" id="canvascontainer">
tab 2
</div>
<div class="col col-25 p0">
<div class="img-box">
<ion-scroll zooming="false" direction="y" class="my-imgs-scroll" id="maincontainer1">
</ion-scroll>
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab3.html" type="text/ng-template">
<ion-view view-title="tab3">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> <canvas id="canvas3"></canvas> </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab4.html" type="text/ng-template">
<ion-view view-title="tab4">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab5.html" type="text/ng-template">
<ion-view view-title="tab5">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/tab6.html" type="text/ng-template">
<ion-view view-title="tab6">
<div class="my-content-tabs scroll-content ionic-scroll has-header has-footer has-tabs-mytop">
<div class="row p0">
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
<div class="col col-50"> Coming Soon </div>
<div class="col col-25 p0">
<div class="img-box">
</div>
</div>
</div>
</div>
</ion-view>
</script>
<script id="templates/nav-stack.html" type="text/ng-template">
<ion-view view-title="Tab Nav Stack">
<ion-content class="padding">
<p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="templates/next.html" type="text/ng-template">
<ion-view view-title="View Cart" nav-bar-class="bar-balanced">
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
clicked id :
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script>
angular.module('ionicApp', ['ionic', 'ionicApp.controllers', 'ngAnimate']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.tab1', {
url: "/tab1",
views: {
'tab1-tab': {
templateUrl: "templates/tab1.html",
controller: 'Tab1Ctrl'
}
}
})
.state('tabs.tab2', {
url: "/tab2",
views: {
'tab2-tab': {
templateUrl: "templates/tab2.html",
controller: 'Tab2Ctrl'
}
}
})
.state('tabs.tab3', {
url: "/tab3",
views: {
'tab3-tab': {
templateUrl: "templates/tab3.html",
controller:'Tab3Ctrl'
}
}
})
.state('tabs.tab4', {
url: "/tab4",
views: {
'tab4-tab': {
templateUrl: "templates/tab4.html"
}
}
})
.state('tabs.tab5', {
url: "/tab5",
views: {
'tab5-tab': {
templateUrl: "templates/tab5.html"
}
}
})
.state('next', {
url: "/next",
templateUrl: "templates/next.html",
controller: "NextController",
params: {
clickedid: null
}
})
$urlRouterProvider.otherwise("/tab/tab1");
})
.controller('HomeTabCtrl', function($scope, $ionicSideMenuDelegate, $state) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.toggleRightSideMenu = function() {
console.log('rigth open')
$ionicSideMenuDelegate.toggleRight();
};
console.log('HomeTabCtrl');
$scope.next = function(){
$state.transitionTo('next');
}
}).controller("NextController", function($scope){
$scope.showAlert = function(){ alert("I'm a modal window!") }
});
</script>
</body>
</html>
The simple way is to use $rootScope but will always reset when the page refreshes, since it's a single-page app.
You need to use something that persists client-side, such as a cookie or sessionStorage (as they both have an expiration time). For the cookies see $cookieStore: https://docs.angularjs.org/api/ngCookies/service/$cookieStore
How about this ?
http://codepen.io/anon/pen/YwjEBx
Note that i'm not technically passing variable between states.
Your sidepanel and details view belong to the same controller so I just have to set some variable on the scope controller to play with.
Here's the main change : an ng-repeat with objects on the side panel. Use of a button to be able to bind an ng-click event. A currentItem in the scope that hold the value of the currentItem to be shown in the details view. I only modified the template tab1.html and the tab1Ctrl nothing more.
.controller('Tab1Ctrl', function($scope){
$scope.items = [{label:'Item 1', details:'details 1'},{label:'Item 2',details:'details 2'}]
$scope.currentItem=null;
$scope.setCurrentItem = function(item){
$scope.currentItem = item;
}
})
<div ng-repeat="item in items">
<button id="$index" style="height=:40px" ng-click="setCurrentItem(item)">{{item.label}}</button><hr/>
</div>
You can work with $rootScope to sharing data between controllers. I use a lot.
See here a good example
Don't abuse the $rootScope to pass things between states. It's not meant for that. $rootScope is meant for global application level functionality.
Please read this solution: watched scope is empty after route change
Having trouble trying to get my app to switch to another page on a click in my controller. If anyone could give me pointer on what I'm missing or doing wrong here it would really be appreciated!
here is my app.js
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
views: {
'login': {
templateUrl : 'index.html',
controller: 'TestCrtl'
}
}
})
.state('userprofile', {
url: '/mainmenu',
templateUrl: 'views/main-menu/main-menu.html'
})
$urlRouterProvider.otherwise('/');
})
.controller('TestCtrl',function($scope, $location) {
$scope.testMove = function($scope, $location) {
console.log("Button was pressed!");
$location.transitionTo('/mainmenu');
}
});
and here is my index.html
<body ng-app="app" animation="slide-left-right-ios7">
<ion-view style="" title="MainMenu">
<div class="bar bar-header bar-assertive">
<h1 class="title">Home</h1>
<a class="button icon-right button-clear ion-gear-a"></a>
</div>
<ion-content style="background-color: #e9efec" class="has-header" scroll="true" padding="true">
<div align="center" style="padding: 15%">
<img style="height: 60px; width: 180px" src="img/digicellogo.png">
</div>
<div style="" class="list card">
<div class="item item-body">
<form >
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/username-logo.JPG">
</a>
<input type="text" placeholder="DigicelID">
</label>
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/password-logo.JPG">
</a>
<input type="text" placeholder="Password">
</label>
<div align="right">
<button class="button button-clear button-assertive">
Forgot Password?
</button>
</div>
<a class="button button-block button-assertive" ng-click="testMove()" ng-controller="TestCtrl">
Login
</a>
<button class="button button-block button-assertive">
Sign Up
</button>
</form>
</div>
</div>
</ion-content>
</body>
EDIT:
My Updated controller in App.js:
No longer gives me a "undefined error" but simply does nothing? I don't know if I fully understand how to inject $scope.
.controller('TestCtrl',['$scope', '$state', function($scope, $state) {
$scope.testMove = function() {
console.log("Button was pressed!");
$state.go('userprofile');
};
}])
Try using $state.go('userprofile');
instead of location.transitionTo('/mainmenu');
(remember to inject $state into your controller to test this)
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
}
};