Related
I am working with angular and ionic and i'm currently not able to print ANY title in the navbar.
I have a quite complex setup with multiple nested views.
Here's the list of states:
state('app', {
cache: false,
url: '/app',
abstract: true,
templateUrl: './sections/menu/menu.tpl.html',
controller: 'menuCtrl'
}).state('app.home', {
url: '/home',
views: {
'appContent': {
templateUrl: './sections/menu/pageViewsContainer.tpl.html',
controller: 'homeCTRL'
},
'Details#app.home': {
templateUrl: './sections/home/home.tpl.html'
},
'List#app.home': {
templateUrl: './sections/List/List.tpl.html'
}
}
}).state('app.details', {
name: 'appDetails',
url: '/:ID',
views: {
'appContent': {
templateUrl: './sections/menu/pageViewsContainer.tpl.html',
controller: 'DetailsCtrl'
},
'zoneDetails#app.details': {
templateUrl: './sections/Details/Details/details.tpl.html'
},
'zoneList#app.details': {
templateUrl: './sections/List/List.tpl.html'
}
}
});
My main (abstract) state is app and uses menu.tpl.html which looks like this:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content class="custom-central-content">
<ion-nav-bar class="bar-calm custom-header-bar">
<ion-nav-buttons side="left">
<!--<button class="button button-icon button-clear ion-home" menu-toggle="left"></button>-->
<button class="button button-icon button-clear ion-home" ui-sref="app.myHouse" id="AppMenuLeftIcon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right" id="AppMenuRightIcon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-view ui-view="appContent"></ion-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="bar-dark">
.....
inside <ion-view ui-view="appContent"></ion-view> I am using the template from pageViewsContainer.tpl.html which is:
<ion-view>
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
and then inside both Details and List I am printing the two views I need.
The problem is that I need to be able to set a static title for the main (home) page, but then dynamically change it when I go inside Details with the name of the page from my scope.
The problem is that I am not able to print ANY title (plain text, not scope) in any way.
I tried with (in pageViewsContainer.tpl.html):
<ion-view>
<ion-nav-title>View 1</ion-nav-title>
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
<ion-view view-title="View 1">
<ion-content class="hg-split-page-container">
<div ui-view="List" class="hg-split-page-zone-list has-header" nav-transition="none"></div>
<ion-nav-view name="Details" class="hg-split-page-zone-details"></ion-nav-view>
</ion-content>
</ion-view>
as well as (inside details template):
<ion-view>
<ion-nav-title>View 1</ion-nav-title>
<ion-content class="has-footer has-header">
...
<ion-view view-title="View 1">
<ion-content class="has-footer has-header">
...
But nothing worked.
Suggestions?
Try adding the title command inside header-bar
<ion-view>
<ion-header-bar class="bar-stable">
<h1 class="title">View 1</h1>
</ion-header-bar>
<ion-view>
or try
<ion-view>
<div class="bar bar-header browse-header" align-title="center">
<h1 class="title">View 1</h1>
</div>
<ion-content class="has-header">
</ion-content>
</ion-view>
It turned out I had to change quite a bit on my navigation, as I was using the nested views, parent, childs in a completely wrong way. It's working fine now.
Also, if, for some reasons, the title navbar it's still not displayed, you can force it using this in the controller (coffeescript):
# This should show the navabar everytime the view is entered
$scope.$on '$ionicView.enter', () ->
$ionicNavBarDelegate.showBar true
I've been stuck on this issue for a week now and I feel like I understood 'ui-router' and 'ionic's' view routing but this seems not to be the case.
I've seen numerous examples how the view works but now as my build is larger, the examples I've seen are too simplistic for my project as my project has views for both a side menu, tabs, and each tabs content.
My issue:
I am holding more than one view with different controllers inside of my tabs. I'm working with a leaflet map and a drop down list that will be populated with my locations and I got both to work. However, the views are making weird calls. Anytime I select the leaflet map it pushes my "Discover List" (in my discover-home.html) button under my apps ion-nav-bar in my menu.html. In addition, you can see that this list view is in-between my map and the zoom icons and if do not touch my map and I switch tabs and come back I cannot open the list again.
I think the question's I need to ask to understand my problem are
1. What is the correct way to navigate in a multi-viewed applications using ionic's view navigation?
2. Why does changing views disable other controllers from being called again?
3. What are some of the best practices?
This is what I'm dealing with. Any help would be appreciated.
my tab view inside discover-home.html
Sidebar view inside menu.html
List Display inside discover-home.html
discover list in discover-home.html hidden under ion-nav-bar in menu.html
Here's my code snippets
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
discover-tabs-controller.html
This controls the tabs views (one of which is discover-home.html)
<ion-view>
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<ion-tabs class="tabs-positive tabs-icon-only" >
<ion-content has-subheader="true"></ion-content>
<!--HOME TAB [OPEN]-->
<ion-tab title="Discover" icon-on="icon ion-home" icon-off="icon ion-home"
href="#/app/discover/home">
<ion-nav-view cache-view="true" name="home-tab"></ion-nav-view>
<!-- View For Home.html -->
</ion-tab>
<!--HOME TAB [CLOSED]-->
<!--MORE TABS HERE-->
</ion-content>
</ion-tabs>
</div>
</ion-view>
Discover-home.html
<ion-view view-title="Home">
<!--SUBHEADER BUTTON: DISPLAY LISTVIEW -->
<div ng-controller="FrostCtrl" class="bar bar-subheader button bar-balanced" ng-click="pushFrost()">
<h2 class="title">{{title}} List</h2>
</div>
<!--DISPLAY OVERLAY WITH LIST-->
<ion-pane ng-controller="OverlayCtrl" class="dark-overlay" ng-show="showOverlay">
<ion-content class="has-subheader">
<button class="button button-block button-outline button-balanced" ng-click="hideFrost()">Dismiss
</button>
<ion-list>
<ion-item ng-repeat="item in items" class="dark-item">
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
<!--LEAFLET MAP -->
<leaflet class="has-subheader padding"center="nassau" paths="paths" tiles="tiles" markers="markers" defaults="defaults">
</leaflet>
</ion-view>
controller.js
angular.module('starter.controllers', [])
...
// #######| LEAFLET MAP |#######
.controller('ActivityCntl', [ '$scope', 'leafletData', function($scope, leafletData) {
var tileSource = {
onlineTiles: {
url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
},
};
angular.extend($scope, {
nassau: {
lat: 25.074521,
lng: -77.318191,
zoom: 13
.........
});
}])
// #######| SHOW OVERLAY |#######
.controller('FrostCtrl', ['$scope', '$rootScope', '$compile', function($scope, $rootScope, $compile) {
$scope.pushFrost = function() {
var el = angular.element(document.getElementById('myPane'));
el.attr('frost', '');
el = $compile(el)($scope);
$rootScope.showOverlay = true;
};
}])
//#######| DISPLAYS CONTENTS |##########
.controller('OverlayCtrl', function($scope, $rootScope, $compile) {
$scope.items = [];
for(var i = 0; i < 5; i++) {
$scope.items.push({
text: 'Whatever ' + (i+1)
});
}
$scope.hideFrost = function() {
$rootScope.showOverlay = false;
var el = angular.element(document.getElementById('myPane'));
};
})
app.js
config(['$stateProvider', '$urlRouterProvider','$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('app', {
name: 'app',
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.discover', {
name: 'app.discover',
url: "/discover",
views: {
'menuContent': {
templateUrl: "templates/discover-tabs-controller.html"
}
}
})
// for my discover-home.html
.state('app.discover.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/discover-tabs/discover-home.html",
controller: 'ActivityCntl'
},
'discover-home-listview': {
templateUrl: "templates/discover-tabs/discover-home.html",
}
}
})
menu
This controls the sidemenu items
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
//IT GETS PUSHED UNDER THIS
<ion-nav-bar class="bar-calm">
<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">MYApps</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
<i class="icon ion-person"></i>
Login
</ion-item>
<ion-item menu-close href="#/app/discover">
<i class="icon ion-location"></i>
Discover
</ion-item>
<ion-item menu-close href="#/app/map">
<i class="icon ion-map"></i>
Map
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
I am trying implement ionic slide box with dynamic ion slide. I am using ng-repeat (don't know if collection-repeat should be used here or not) to multiply the <ion-slide> and handling the addition of new slide on on-slide-changed event like below:
var i = 0;
$scope.slideHasChanged = function($index) {
if($index == $scope.data.news.length - 1) {
$scope.data.news.push({title:'Test '+(++i)});
$ionicSlideBoxDelegate.update();
}
}
Its working fine, but its pushing new slide below the currently focused slide and its visible, which looks weird.
Also, when I removed every parent ionic element like <ion-view> and <ion-content> from the view and kept only <ion-slide-box> in entire page, its working fine without pushing new slide below, which I do not want since I have other logic behinds <ion-view> and <ion-content> ? So my question is how to make slide box working properly under view or content tag ?
below is my non-working code sample:
<ion-view hide-nav-bar="true">
<ion-content class="row-center col-center">
<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="false">
<ion-slide ng-repeat="news in data.news">
<h1>{{news.title}}</h1>
<img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" />
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
(Please note, slide box is working properly after I remove ion view and content from the page)
UPDATE
http://codepen.io/agupta1989/pen/MwGbOW?editors=101
After few trial and analysis in Chrome, I found on on-slide-change event, in controller, when I am adding new slide dynamically, Ionic failed to apply in-line css to newly added <ion-slide>. Please have look below:
<div class="slider-slides" ng-transclude="" style="width: 1080px;">
<!-- ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="0" style="width: 360px; left: 0px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(-360px, 0px) translateZ(0px);">
<!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="1" style="width: 360px; left: -360px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(-360px, 0px) translateZ(0px);">
<!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="2" style="width: 360px; left: -720px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(0px, 0px) translateZ(0px);">
<!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide">
<!-- Content ommitted -->
</ion-slide>
<!-- end ngRepeat: news in data.newsCards -->
Look at the last <ion-slide> which doesn't have the in line css. is it a bug or am I doing it in wrong way ?
Here is a example that should help, you can change max slides or use a collection repeat (so you dont crash to app due to memory issues).
EDIT: This is now working code with no wrapping
HTML:
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<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="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<ion-slide-box delegate-handle="news-cards"
on-slide-changed="slideHasChanged($index)" show-pager="false" >
<ion-slide ng-repeat="news in data.newsCards">
<h1>{{news.title}}</h1>
<img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" style="width:90%;"/>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
</script>
<script id="templates/facts.html" type="text/ng-template">
<ion-view view-title="Facts">
<ion-content class="padding">
<p>Banging your head against a wall uses 150 calories an hour.</p>
<p>Dogs have four toes on their hind feet, and five on their front feet.</p>
<p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
<p>A cockroach will live nine days without it's head, before it starves to death.</p>
<p>Polar bears are left handed.</p>
<p>
<a class="button icon ion-home" href="#/tab/home"> Home</a>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/facts2.html" type="text/ng-template">
<ion-view view-title="Also Factual">
<ion-content class="padding">
<p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
<p>1 in every 4 Americans has appeared on T.V.</p>
<p>11% of the world is left-handed.</p>
<p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
<p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
<p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
<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 id="templates/about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
<h3>Create hybrid mobile apps with the web technologies you love.</h3>
<p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
<p>Built with Sass and optimized for AngularJS.</p>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
</p>
</ion-content>
</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/contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<div class="list">
<div class="item">
#IonicFramework
</div>
<div class="item">
#DriftyTeam
</div>
</div>
</ion-content>
</ion-view>
</script>
CSS:
.slider {
height: 100%;
}
.slider-slide {
padding-top: 40px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.slider-pager-page i{
}
JS:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "templates/facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "templates/nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "templates/contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope, $ionicSlideBoxDelegate) {
$scope.data = {
newsCards: []
}
$scope.$on('$ionicView.enter', function(event,state) {
event.preventDefault();
$scope.data.newsCards = [{title:'abc'},{title:'xyz'},{title:'pqr'},{title: '123', title: '1234', title:'hello'}];
$ionicSlideBoxDelegate.$getByHandle('news-cards').update();
});
var i = 0;
$scope.slideHasChanged = function($index) {
if($index == $scope.data.newsCards.length-1 && $index < 6) {
$scope.data.newsCards.push({title:'Dummy'+(++i)});
console.log($scope.data.newsCards);
$ionicSlideBoxDelegate.$getByHandle('news-cards').update();
}
else if($index == 6) {
alert($index);
$ionicSlideBoxDelegate.slide($index-1);
}
}
});
Working Code Pen: http://codepen.io/anon/pen/pJVNKz
Finally I end up with Swiper by Idangerous. It have very nice and rich set of API's, methods and events. Here is a link. Yes, I had to use $compile service from angular to compile those additional slides or html which needs to push dynamically while user swipe. Along with added dynamic slides, I managed to write little algorithm to clean up existing slides using removeSlides([0,1,2]) and add new slides using appendSlides() and prependSlides() vice versa.
In my application with a side menu and several pages. One of those pages, (let's call it Page A) has tabs, everything was working OK - side menu changes the screen with different pages, Page A with tabs had it's tabs working.
Things went south when I tried to add another page with tabs (let's call it Page B). If I am on any page and click on Page A, Page A appears, its tabs works ok. If I click on side menu to open Page B, the URL changes, but nothing happens (Page A is still on screen). All other pages load without problems. If I refresh the browser with Page B URL opened, or refresh on any page other than Page A and then click on Page B side menu link, Page B loads OK, and the reverse happens - any page but Page A will load.
If I comment the code to have tabs on either Page A or Page B, everything works again. So it seems that I can't have an app with side menu and two different pages with different tabs. Is that correct?
Here's my code (relevant parts):
index.html:
<body ng-app="kinofit">
<ion-nav-view></ion-nav-view>
</body>
app.js:
angular.module('kinofit', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.home', {
url: "/home",
views: {
'menuContent': {
templateUrl: "templates/home.html",
controller: 'HomeCtrl'
}
}
})
.state('app.aerobico', {
url: "/aerobico",
views: {
'menuContent': {
templateUrl: "templates/aerobico.html",
controller: 'AerobicoCtrl'
}
}
})
.state('app.musculacao', {
url: "/musculacao",
views: {
'menuContent': {
templateUrl: "templates/musculacao.html",
controller: 'MusculacaoCtrl'
}
}
});
templates/menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<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>
<ion-list>
<ion-item nav-clear menu-close href="#/app/home">
<i class="icon ion-home"></i> Início
</ion-item>
<ion-item nav-clear menu-close href="#/app/aerobico">
<i class="icon ion-heart"></i> Aeróbico
</ion-item>
<ion-item nav-clear menu-close href="#/app/musculacao">
<i class="icon ion-checkmark-circled"></i> Musculação
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
templates/musculacao.html:
<ion-view view-title="MUSCULAÇÃO" class="musculacao-view">
<ion-tabs tabs-type="tabs-icon-top" class="tabs-striped">
<ion-tab title="Tab 1">
<ion-content class="tabbed-content-within-sidemenu-app padding">
(...)
</ion-content>
</ion-tab>
<ion-tab title="Tab 2">
<ion-content class="tabbed-content-within-sidemenu-app padding">
(...)
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
and templates/aerobico.html is the same, changing the view-title and class attributes.
I'm aware that codepen or similar websites would be better to post the code, but I couldn't make it work with multiple html files.
Any help would be greatly appreciated. Thanks.
Seems like problem related to caching of views, views Caching is by default enable in ionic framework
You need to Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency.(Do add it in config block)
$ionicConfigProvider.views.maxCache(0);
Similar answer here
OP Edit: I couldn't get this to work, but adding cache:false to the $stateProvider call (solution #2 on the "answer here" link above) did the trick for me (OP).
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