Ionic button ng-click - angularjs

I do have a different button on my first page.I just want to move to respective page on clicking to each button.However this is not working.I am new to ionic. Plz help.
Here is my controller.js
`angular.module('starter.controllers', [])
.controller('TutorialsCtrl', function($scope) {})
.controller('AndroidCtrl', function($scope,$state) {
$scope.create = function () {
$state.go('templates/android');
};
});`
This is my app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.tutorials', {
url: '/tutorials',
views: {
'tab-tutorials': {
templateUrl: 'templates/tutorials.html',
controller: 'TutorialsCtrl'
}
}
})
.state('tab.android',{
url:'/tutorials/:tutorialId',
views:{
'tab-tutorials':{
templateUrl:'templates/android.html',
controller:'AndroidCtrl'
}
}
})
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/tutorials');
});
here is my tutorials.html page
<ion-view view-title="Tutorials">
<ion-content class="padding">
<div class="background">
<button class="button button-outline button-positive myandroid" ng-click="create()">
<i class="icon ion-social-android home"></i>
<p>Android</p>
</button>
</div>
</ion-content>
</ion-view>
I want to navigate from tutorials.html to android.html.I do have a blank android.html page at this instant

Instead of button use a(anchor) as you wanted to change the state(route) of your application. And on each anchor you could use ui-sref directive with respective stateName, so that will create create a required href tag over there.
Markup
<ion-view view-title="Tutorials">
<ion-content class="padding">
<div class="background">
<a class="button button-outline button-positive myandroid" ui-sref="tab.tutorials">
<i class="icon ion-social-android home"></i>
<p>Android</p>
</button>
</div>
</ion-content>
</ion-view>

With $state.go() you can go to a state, not to a template as you did.
$scope.create = function () {
$state.go('tab.android');
};

Related

Not able to replace the view with <ion-nav-view>

Not able to replace the view in ionic with . I have menu in form of buttons when I click them the view is not getting replaces.Below is the code I have tried
**index.html**
<div class="button-bar">
<a class="button button-small button-stable button-outline" ui-sref="page1">Page1</a>
<a class="button button-small button-stable button-outline" ui-sref="page2">Page2</a>
<a class="button button-small button-stable button-outline" ui-sref="page3">Page3</a>
</div>
<ion-nav-view name="page1"></ion-nav-view>
<ion-nav-view name="page2"></ion-nav-view>
<ion-nav-view name="page3"></ion-nav-view>
The js files used to replace the view.In page.controller.js nothing is theres. Just declared with app.controller and nothing is there.
**pages.js**
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('page1', {
cache: false,
parent:'app',
views: {
'page1': {
templateUrl: 'templates/page1.html',
controller: 'pages.controller'
}
}
}).state('page2', {
cache: false,
parent:'app',
views: {
'page2': {
templateUrl: 'templates/page2.html',
controller: 'pages.controller'
}
}
}).state('page3', {
cache: false,
parent:'app',
views: {
'page3': {
templateUrl: 'templates/page1.html',
controller: 'pages.controller'
}
}
})
});
The below are the html pages for the views.
page1.html
<ion-view view-title="page1">
<ion-content>
<div> <h2> Welcome to Page 1</h2> </div>
</ion-view>
</ion-content>
page2.html
<ion-view view-title="page2">
<ion-content>
<div> <h2> Welcome to Page 2</h2> </div>
</ion-view>
</ion-content>
page3.html
<ion-view view-title="page3">
<ion-content>
<div> <h2> Welcome to Page 3</h2> </div>
</ion-view>
</ion-content>
app.js
var app = angular
.module(
'sampleapp',
[ 'ionic' ]).config(
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
cache : false,
url : "/app",
abstract:true,
templateUrl : "templates/index.html",
controller : 'appcontroller'
})
Kindly, help me understand why the view is not getting replaced.
this is likely because you have 3 different ion-nav-view tags, and each one of them having a separate name, along with each state only replacing its specific tag name.
Which means even if your views are injected, they will overlap (and probably why you're not seeing your views change, as theyre overlapping).
You should change:
index.html
<div class="button-bar">
<a class="button button-small button-stable button-outline" ui-sref="page1">Page1</a>
<a class="button button-small button-stable button-outline" ui-sref="page2">Page2</a>
<a class="button button-small button-stable button-outline" ui-sref="page3">Page3</a>
</div>
<ion-nav-view name="page-content"></ion-nav-view>
pages.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('page1', {
cache: false,
parent:'app',
views: {
'page-content': {
templateUrl: 'templates/page1.html',
controller: 'pages.controller'
}
}
}).state('page2', {
cache: false,
parent:'app',
views: {
'page-content': {
templateUrl: 'templates/page2.html',
controller: 'pages.controller'
}
}
}).state('page3', {
cache: false,
parent:'app',
views: {
'page-content': {
templateUrl: 'templates/page1.html',
controller: 'pages.controller'
}
}
})
});

Adding slideshow to the ionic side menu starter app is not working

I am a novice to ionic and AngularJS so suspect I am doing something stupid but can't for the life of me work out what. I am using the ionic starter template for a side menu app. I have added another menu item for a 'new home' page. Into this page I have added some code from the ionic code pen example for an introduction slide show. Unfortunately I only get an empty page rather than the slide show.
My home.html template looks like this:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Intro">
<ion-nav-buttons side="left">
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-show="!slideIndex">
Skip Intro
</button>
<button class="button button-positive button-clear no-animation" ng-click="previous()" ng-show="slideIndex > 0">
Previous Slide
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-positive button-clear no-animation" ng-click="next()" ng-show="slideIndex != 2">
Next
</button>
<button class="button button-positive button-clear no-animation" ng-click="startApp()" ng-show="slideIndex == 2">
Start using MyApp
</button>
</ion-nav-buttons>
<ion-slide-box on-slide-changed="slideChanged(index)">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="http://code.ionicframework.com/assets/img/app_icon.png">
</div>
<p>
We've worked super hard to make you happy.
</p>
<p>
But if you are angry, too bad.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
<p>
Too bad!
</p>
</ion-slide>
</ion-slide-box>
</ion-view>
My app.js looks like this:
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/menu.html',
controller: 'AppCtrl'
})
// :NEW: Added stuff to show a home page
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'IntroCtrl'
}
}
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
My controllers.js looks like this:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate) {
$scope.next = function() {
$ionicSlideBoxDelegate.next();
};
$scope.previous = function() {
$ionicSlideBoxDelegate.previous();
};
// Called each time the slide changes
$scope.slideChanged = function(index) {
$scope.slideIndex = index;
};
})
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
});
The menu.html looks like this:
<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>
<!-- :NEW: Added New Home menu item -->
<ion-item menu-close href="#/app/home">
New Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
When I run this app, open the menu, and select the New Home menu option the home.html page does not show properly, it is blank. I am sure I must be doing something stupid here.
I found my stupidity!
I had copied a line from the codepen example that wasn't needed and broke my code. Removing the following code from the home.html fixes the problem.
<script id="templates/home.html" type="text/ng-template">

Ionic and Angular: Routing not working

I have an Ionic sidemenu project with the following menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable" align-title="center">
<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-content>
<div class="list">
<a class="item item-icon-left" menu-close href="#/app/products">
<i class="icon ion-home"></i>
<h2>Home</h2>
</a>
<a class="item item-icon-left" menu-close href="#/app/account">
<i class="icon ion-person"></i>
<h2>mein Konto</h2>
</a>
<a class="item item-icon-left" menu-close href="#/app/orders">
<i class="icon ion-android-list"></i>
<h2>meine Bestellungen</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
The hrefs defined here are all working as intended.
My products page now has several sub-pages.
Html-File:
<ion-view view-title="Home">
<ion-content>
<ion-list>
<ion-item ng-repeat="product in products" href="#/app/products/{{product.templateUrl}}">
{{product.name}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
JS-File:
angular.module('App.Products', ['App.Products.Prints', 'App.Products.Box', 'App.Products.Book', 'App.Products.Framed'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.products', {
url: "/products",
views: {
'menuContent': {
templateUrl: "modules/products/products.html",
controller: 'ProductsController'
}
}
});
})
.controller('ProductsController', function ($scope, ProductsFactory) {
$scope.products = [];
init();
function init() {
$scope.products = ProductsFactory.getProducts();
}
})
.factory('ProductsFactory', function() {
var products = [
{
name: 'Prints',
img: 'img/wardwarz.png',
templateUrl: 'prints'
},
{
name: 'PhotoBox',
img: 'img/argo.png',
templateUrl: 'box'
},
{
name: 'Photobuch',
img: 'img/django.png',
templateUrl: 'book'
},
{
name: 'Photo im Rahmen',
img: 'img/ic_profile.png',
templateUrl: 'framed'
}
];
var factory = {};
factory.getProducts = function () {
// Hier könnte ein HTTP Request rein um die Produkte vom Server zu erhalten!
return products;
}
return factory;
});
and to show one example one content of a sub page:
Html-File:
<ion-view view-title="Prints">
<ion-content>
</ion-content>
</ion-view>
JS-File:
angular.module('App.Products.Prints', [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.products.prints', {
url: "/products/prints",
views: {
'menuContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
});
When i now start the app ionic serve the navigation of the sidemenu works fine and i can open my products page. The navigation to prodcuts/prints does not work. I dont get an error message or anything. There is just nothing happening after the click on the item.
Whats going worng here?
An example Project can be found here: Mega File - MyApp.rar
Instead of using only href to do your navigation use
ui-sref="name_of_the_state"
Example:
ui-sref="app.products.prints"
This way you will not have issues with your navigation on angular/ionic.
If you even have a parameter in your route, like:
$stateProvider.state('app.products.edit', {
url: "/products/edit/:id",
views: {
'menuContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
you can use:
ui-sref="app.products.edit(1)"
Also, I'm not seeying an abstract route on this, the app. It should be like:
app -> abstract
app.products
app.products.prints
I was able to simulate the error on my PC.
When you work with nested states you like app.products.print you need a intermediary view like this:
Example from a code I have on my pc that is working:
.state("admin", {
url: "/admin",
abstract: true,
views: {
"body": { templateUrl: "partials/_layoutAdmin.html" }
}
})
.state("admin.page", {
url: "/page/:idEdition",
abstract: true,
views: {
"header": { templateUrl: "partials/header.html", controller: "DefaultHeaderController" },
"content": { templateUrl: "partials/_layoutAdminEdition.html" }
}
})
.state("admin.page.create", {
url: "/create",
views: {
"content": { templateUrl: "partials/admin.page.form.html", controller: "PageFormController" }
}
})
Example of Templates
The main layout has thi
<div data-ui-view="body"></div>
The _layoutAdmin has this one
<header data-ui-view="header"></header>
<div class="container-fluid">
<div class="row">
<div data-ui-view="content"></div>
</div>
</div>
When the code enters the admin state it will load this first piece...
THEN...
<div data-ui-view="content" class="edition-form"></div>
AND THEN... the form CODE
So, in your case, you have app.products.prints:
app -> need a view -> ok you got it
app.products -> also need a view -> ok you got it
app.products.prints -> inside app.products view (products.html) you need a to show this inside it.
For simplicity, I suggest you to change it's name to app.productsPrint (without the "." and you'll be able to do it the way you are doing it right now with no impact.
Made some changes on the code you provided:
<ion-view view-title="Home">
<ion-content>
<div ui-view="myTestContent"></div>
</ion-content>
</ion-view>
Notice the ui-view="myTestContent"
and
.state('app.products.prints', {
url: "/prints",
views: {
'myTestContent': {
templateUrl: "modules/products/prints/prints.html"
}
}
});
and it worked.
So, in your case I recommend you to use productPrints instead of products.print. This nesting is used in those view inside view scenarios.

AngularJS $scope values from ng-model lost from page to page in same controller - Ionic Framework

I have this page which links the input.countNum scope variable to the input with ng-model. The value which is displayed on the button shows fine. When you click the button on the first page, it navigates to the second page which also displays the scope variable. But the variable is reset to the default declaration value in the controller code.
How do I maintain the scope value from ng-model between pages within the same controller?
tab-dash.html
<ion-view view-title="Test">
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Count</span>
<input class="text-right" type="number" pattern="[0-9]*" ng-model="input.countNum">
</label>
</div>
<button class="button button-full button-positive" ng-click="create()" ui-sref="tab.count">
Count is ({{input.countNum}})
</button>
</ion-content>
</ion-view>
controller.js
.controller('DashCtrl', function($scope) {
$scope.input = {
countNum: 1
};
$scope.create = function() {
// Logic here
};
})
count.html
<ion-view view-title="Count">
<ion-nav-bar class="bar-energized">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class="padding">
<button class="button button-full button-positive">
({{input.countNum}})
</button>
</ion-content>
</ion-view>
app.js
.state('tab', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.count', {
url: '/count',
views: {
'tab-dash': {
templateUrl: 'templates/count.html',
controller: 'DashCtrl'
}
}
})
Controllers are not shared between pages - a new instance is created each time the controller is used. You should not expect to be able to share data from a controller with anything outside the scope of that controller either. If you need to share data between pages or controllers, you should use a service or "value" object to maintain that state. Another option would be passing the data between the pages using the state params:
ui-sref="tab.count({ input: input })"
Note that Ionic uses the Angular UI Router project for its navigation logic, so the documentation there also applies to using Ionic.

Ionic - How to remove sidemenu on login page only?

I need to remove sidemenu only on my login page. Otherwise remain. How it can be done? I'm using command ionic ionic start myApp sidemenu to create the project.
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html"
}
}
})
login page
<ion-view title="Login">
<ion-content>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="login()">Log in</button>
</label>
</div>
</ion-content>
</div>
You can disable/enable sidemenu at any time at any page by calling
$ionicSideMenuDelegate.canDragContent(false)
e.g:
angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {
$ionicSideMenuDelegate.canDragContent(false)
});
**Ionic 2**
import { MenuController } from 'ionic-angular';
export class LoginPage {
constructor(public menuCtrl: MenuController) {
}
ionViewWillEnter() {
this.menuCtrl.swipeEnable( false )
}
ionViewDidLeave() {
this.menuCtrl.swipeEnable( true )
}
}
IONIC 4: Sept2019
try this code to in your login.page.ts
Step1: import { MenuController } from '#ionic/angular';
Step2: constructor(public menuCtrl: MenuController) { }
(below constructo)
Step3: ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionViewDidLeave() {
this.menuCtrl.enable(true);
}
this code will help you to work with side menu flawlessly on any screen, if you login & re-login and try it will work now.
same issue here. just add hide-nav-bar="true" to the ion-view
<ion-view hide-nav-bar="true">
Hope it helps!
What you can do is define the login page without a sidemenu. Check your login page HTML template. Make sure you do not have the <ion-side-menus> and <ion-side-menu> elements in it. These are used on pages that need to have a sidemenu.
Your login page should look like this:
<ion-view>
<ion-content>
<!--your page content goes in here-->
</ion-content>
</ion-view>
To have sidemenu on other pages, just put the sidemenu content in a parent state which in your code is the app state.
Your menu.html file:
<ion-view>
<ion-side-menus>
<ion-side-menu>
<!--put your side menu content here-->
<!--any child state of app will inherit this sidemenu-->
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</ion-view>
A little late to the game but this is another option for those (like me) who need to keep their login view within the side-menu layout but need to hide the side menu button while keeping the view title.
Inside the login.html view use the ion-header-bar directive to create a new header with a title and then hide the ion-nav-bar in the side-menu layout via the ion-view tag.
Example (login.html)
<ion-header-bar class="bar-positive" align-title="center">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-view hide-nav-bar="true">
<!-- Login content goes here -->
</ion-view>
Then if you need to disable any drag gestures do so in the controller like #waqas suggests.
I have made a small demo for the question.
Plunker Demo
If you want a page differently from sidemenu.Create a new Parent state.
For example
$stateProvider
.state('landing', {
url: '/landing',
controller: 'landingCtrl',
templateUrl: 'landing.html'
});
Html :
<ion-view class="view-bg-blue" >
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h3 class="text-center">Welcome To Landing Page</h3>
<div class="row">
<div class="col">
<div class="text-center">
<h4>My App</h4>
<div class="row">
<div class="col">
<input placeholder="User">
</div>
</div>
<div class="row">
<div class="col">
<input placeholder="password">
</div>
</div>
<a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Then call this state using /landing when ever you want.
I know this is late but here is a quick and easy solution.
Add this in your login Controller
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
<ion-side-menus>
bcn
<ion-tab title="ALL" href="#/dashbord/all" class="bgorange">
<ion-nav-view name="all"></ion-nav-view>
</ion-tab>
<ion-tab title="INFO" class="bgorange" href="#/dashbord/info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
<ion-tab title="EVENTS" class="bgorange" href="#/dashbord/events">
<ion-nav-view name="events"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-nav-view></ion-nav-view>
</ion-pane>
<div ng-include src="calender.html"></div>
<ion-side-menu side="left">
<ion-content has-header="true">
<ion-list>
<ion-item menu-close class="item-icon-left bottombordernone" href="#/dashbord">
<i class="icon ion-home"></i>
What's New
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone">
<i class="icon ion-chatbox-working"></i>
Feedback
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone" ng-click="logout()">
<i class="icon ion-power"></i>
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
#Zulu here's my full code.
I hope this Ex. work for you.
// index.html
<body>
<section ui-view></section>
</body>
// routes.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html'
})
$urlRouterProvider.otherwise('/login')
it's work, see more here: angular-ui/ui-router
You have to watch the slide menu.
If it is open, you have to toggle it and close.
.controller('kayTOlCtrl', function($scope,$ionicSideMenuDelegate) {
//
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
if (ratio != 0) {
$ionicSideMenuDelegate.toggleRight();
}
});
})
Calling $ionicSideMenuDelegate.canDragContent(false) does disable the ability to swipe to access the menu, but does not hide the hamburger toggle button in the navbar (if you have one). To do that, you can use ng-show with $root binding in your ion-side-menu-content element like this:
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"
ng-show="$root.showMenuIcon">
</button>
</ion-nav-buttons>
Then in your login controller:
$scope.$on('$ionicView.beforeEnter', function (event) {
$scope.$root.showMenuIcon = false;
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.beforeLeave', function (event) {
$scope.$root.showMenuIcon = true;
$ionicSideMenuDelegate.canDragContent(true);
});
you can also add this to your main app controller:
$scope.$root.enableLeft = true;
$scope.$root.showMenuIcon = true;
and simply switch it to false in every controller you dont want your side menu appear in:
$scope.$root.enableLeft = false;
$scope.$root.showMenuIcon = false;
add is-enabled="$root.enableLeft" to your html tag and ng-show="$root.showMenuIcon" to the button inside html tag.
Based on various answers here from everyone and 15 minutes of trying, here is my working example of it, and it should work as simply doing copy-paste
Your view, like login.html
<ion-view hide-nav-bar="true">
<ion-header-bar class="bar-light title-image" align-title="center">
<h1 class="title">Title</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-view>
Your related controller, like LoginCtrl
function LoginCtrl($scope, $ionicSideMenuDelegate) {
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
}
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/loginpage.html'
})
.state('app.account', {
url: '/account',
views: {
'menuContent': {
templateUrl: 'templates/account.html',
controller: 'AccountCtrl'
}
}
})
import {IonicApp, Page, NavController, MenuController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';
#Page({
templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
constructor(nav: NavController, userData: UserData, menu: MenuController) {
this.nav = nav;
this.userData = userData;
this.login = {};
this.submitted = false;
this.menu = menu;
}
onLogin(form) {
this.submitted = true;
if (form.valid) {
this.userData.login();
this.nav.push(TabsPage);
}
}
onSignup() {
this.nav.push(SignupPage);
}
onPageDidEnter() {
// the left menu should be disabled on the login page
this.menu.enable(false);
}
onPageDidLeave() {
// enable the left menu when leaving the login page
this.menu.enable(true);
}
}
<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">
</ion-content>
</ion-pane>
This is works for me ...
I think the simplest solution in opening the login page in a modal view, checkout $ionicModal

Resources