So In the Ionic I am using ui-router with nav view but it doesn't seem to work properly:
app.js
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/home.html'
})
.state('app.book', {
url: '/book',
views: {
'menuContent': {
templateUrl: 'templates/book.html'
}
}
})
.state('app.service', {
url: '/service',
views: {
'menuContent': {
templateUrl: 'templates/service.html',
controller: 'ServiceController'
}
}
})
$urlRouterProvider.otherwise('/app/book');
home.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-header-bar align-title="left" class="bar-positive">
<button class="button icon-left ion-navicon-round button-clear " menu-toggle="left"> </button>
<h1 class="title">Maalish</h1>
</ion-header-bar>
<ion-nav-view name="menuContent"></ion-nav-view>//Nav View
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-content>
<ion-list>
<ion-item item-icon-left menu-close href="#/app/splash">
<i class="icon ion-home"></i>
  Home
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Book.html
<ion-view view-title="book">
<ion-content class="book-content">
Hi
Click
</ion-content>
</ion-view>
Service.html:
<ion-view view-title="service">
<ion-content class="book-content">
Hey
</ion-content>
</ion-view>
So here is the small description:
Home.html-It has the sidemenu required on all the pages/screens its the parent screen
Book.html:Its the deafault and first screen link to service.html
Service.html:Its the second screen.
Problem:
So when I open the app the book.html opens and it has the sidemenu(home.html) but when i click on the link service.html The page opens but it doesnt have sidemenu.If i refresh the link of service.html only then the sidemenu opens.
Sidemenu doesn't appear when redirected from book.html
Solved It you just have to change to I.e change true to false
Related
I use ion-menu component in my app. I change it based route. so I modified that. For ex is below.
My issue is first time menu clicked & the app load next that menu
related view time the side menu was close correctly but reopened next few second.
My approutemodule.ts
[{
path: '',
canActivate: [AuthGuard],
component: SideMenuComponent,
children: [{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
}, {
path: 'dashboard',
loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule'
}, {
path: 'tabs-view',
loadChildren: './layouts/footer-tabs/footer-tabs.module#FooterTabsPageModule'
}]
}, {
path: 'login',
loadChildren: './pages/login/login.module#LoginPageModule'
}];
My appcomponent.html
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
My sidemenucomponent.html
<ion-split-pane>
<ion-menu id="app-side-manu" #sideMenu>
<ion-header class="user-img">
<ion-toolbar>
<ion-avatar>
<img *ngIf="userImg" [src]="userImg" alt="user-img" />
</ion-avatar>
<div>
<h2>{{userName}}</h2>
<p>{{userLoc}}</p>
</div>
</ion-toolbar>
</ion-header>
<ion-content class="side-menu">
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
<ion-item lines="none" class="link-hover" routerDirection="root" [routerLink]="p.url">
<ion-thumbnail slot="start">
<ion-img [src]="p.icon"></ion-img>
</ion-thumbnail>
<ion-label>
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false" >
<ion-item lines="none" class="link-hover" (click)="globalHelper.logout()">
<ion-thumbnail slot="start">
<ion-img src="/assets/images/logout.png"></ion-img>
</ion-thumbnail>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
Use side-menu component selector in your app component html file.
For Ex:
<ion-app>
<app-sidemenu-component></app-sidemenu-component>
</ion-app>
If you want side-menu show hide different screen. It's possible.
For Ex:
home screen is need to side-menu
// first import MenuController in your home screen
import { MenuController } from '#ionic/angular';
// Next add that constructor to assign private variable menuCtrl
constructor(private menuCtrl: MenuController){}
// then use it ionViewWillEnter method inside
ionViewWillEnter() {
this.menuCtrl.enable(true);
}
login screen is no need to side-menu
ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionic one tab go to another tab's child page can't go back to another tab
The problem: There's a button can go to state 'tab.settings.sub' in state 'tab.home' page, when first time I enter into state 'tab.home' , then click button to enter into state 'tab.setting.sub' but I can't go back to state 'tab.setting'.
<ion-nav-bar>
<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>
<ion-tab title="home" ui-sref="tabs.home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="settings" ui-sref="tabs.settings.index">
<ion-nav-view name="settings-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>
<button class="button" ng-click="home.goSub()">settings/sub</ion-item>
</ion-content>
</ion-view>
</script>
<script id="templates/settings.html" type="text/ng-template">
<ion-view view-title="settings">
<ion-content>
<ion-item ui-sref="tabs.settings.sub">settings/sub</ion-item>
</ion-content>
</ion-view>
</script>
<script id="templates/sub.html" type="text/ng-template">
<ion-view view-title="settings/sub">
<ion-content>
welcome to settings/sub
</ion-content>
</ion-view>
</script>
The problem in http://codepen.io/piwinux/pen/BNYXKd
Thank you for help.
Okay the issue here is that you did not declared your "Home" tab abstract nor its substates in your MyConfig.js. In order to implement navigation in your "Home" tab you have to use the same pattern you have for the "Settings" tab:
tabs.home state with abstract: true and template: '<ion-nav-view></ion-nav-view>' to navigate in the tab.
tab.home.index initial route of your "Home" tab with templateUrl: 'templates/home.html'.
tab.home.nextRoute for the next route within "Home" tab using $state.go ('tabs.home.sub'); instead of $state.go ('tabs.settings.sub'); in your HomeCtrl to access it.
.state ('tabs', {
abstract: true,
url: '/tab',
templateUrl: 'templates/tabs.html'
})
.state ('tabs.home', {
abstract: true,
url: '/home',
views: {
'home-tab': {
template: '<ion-nav-view></ion-nav-view>',
controller: 'HomeCtrl as home'
}
}
}).state ('tabs.home.index', {
url: '',
templateUrl: 'templates/home.html'
})
.state ('tabs.home.sub', {
url: '/sub',
templateUrl: 'templates/sub.html'
})
I'm making a simple app that keeps track of my hours at work. I'm developing the app for android and I'm having a problem with the scrolling.
Structure of the App:
I have a header bar and a footer which are both outside of the < ion-content > tab, so I don't expect that to be scrollable. Within the < ion-content > I have used an < ion-side-menus > tab and finally within the < ion-side-menu-content > tab I have put in a < ion-nav-view > tab which is controlled by my state provider.
Everything works fine, the menu is operational and the views change according to their design. Within one of my views I have a list that exceeds the size HERE IS WHERE THE PROBLEM BEGINS!. When using a computer, I can pull the page down (as if I were trying to refresh it) but when I try to scroll down the page goes straight to the top of the list unless I keep dragging and have my finger on the left click. Furthermore the rest of the content in the list is not loaded. The listed is literally cropped to where it stopped before I dragged down. When I export it to an android app I cant even drag to scroll. The scrolling is literally non-functional.
I've attached some code
var app = angular.module('starter', ['ionic'])
.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);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: "views/home.html",
controller: "MainController"
})
.state('rotas', {
url: '/rotas',
templateUrl: "views/rotas.html",
controller: "MainController"
})
.state('update', {
url: '/update',
templateUrl: "views/update.html",
controller: "UpdateController"
});
$urlRouterProvider.otherwise('/');
});
.scroll {
height: 100%;
}
/* Before i put in this CSS element, the content in the view was cropped SIGNIFICANTLY. not sure exactly what it does but it solved my problem. All other CSS elements are colour changes*/
index.html
<html>
<head>...</head>
<body ng-app="starter" ng-controller="MainController">
<ion-pane>
<ion-header-bar class="bar-stable">
<!--header bar -->
<h1 class="title">Shiftwiz.{{controllerCheck}}</h1>
</ion-header-bar>
<div class="bar bar-footer bar-stable">
<!--footer-->
<table id="footer-table">
<tr>
<td>
<a ui-sref="rotas" ng-click="activity.doRotas()">
<div>Rotas</div>
</a>
</td>
<td>
<a ui-sref="update" ng-click="activity.doUpdate()">
<div>Update</div>
</a>
</td>
</tr>
</table>
</div>
<ion-content>
<ion-side-menus>
<ion-side-menu-content overflow-scroll="true">
<!--menu-->
<button class="button button-full button-positive" ng-click="toggleLeft()">
Rotas: {{activity.rotas}} Update: {{activity.update}}
</button>
<ion-nav-view overflow-scroll="true"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item>Next Week</ion-item>
<ion-item ng-click="toggleLeft(); activity.chooseThisWeek(); calcDates()">This Week</ion-item>
<div id="further-weeks" ng-show="activity.rotas">
<ion-item>Last Week</ion-item>
<ion-item>Last Two</ion-item>
<ion-item>Last Three</ion-item>
</div>
</ion-side-menu>
</ion-side-menus>
</ion-content>
</ion-pane>
</body>
</html>
update.html
<!-- this view contains the list which isn't rendering-->
<div class="card" ng-repeat="day in unPublishedRota">
<a ng-click="day.toggleState()">
<div class="item item-divider">
<p class="day">{{ day.date | date:"EEEE" }}
<br />{{day.date | date:"d, MMM y"}}</p>
<p class="times">{{day.start}} | {{day.finish}}
<br />{{day.hours}} hrs</p>
</div>
</a>
Your update.html contents should be wrapped in <ion-view> and <ion-content> elements.
<ion-view>
<ion-content>
<div class="card" ng-repeat="day in unPublishedRota">
<a ng-click="day.toggleState()">
<div class="item item-divider">
<p class="day">{{ day.date | date:"EEEE" }}
<br />{{day.date | date:"d, MMM y"}}</p>
<p class="times">{{day.start}} | {{day.finish}}
<br />{{day.hours}} hrs</p>
</div>
</a>
</div>
</ion-content>
</ion-view>
You can also have a look at a working sidemenu example by Ionic.
Can I have 2 states with abstract:true i.e base layout for different tabs?
Forexample,
for tab-1, tab-2 and tab-3, I need to have tabs.html as abstract:true in state provider and for tab-4, I need to have menu.html as abstract:true in state provder so that subsequent states inherit from it.
Something like this:
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.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.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
})
$stateProvider
.state('app', {
abstract: true,
templateUrl: "templates/menu.html"
})
.state('app.events', {
url: "/events",
views: {
'menuContent': {
templateUrl: "templates/events.html",
controller: 'EventsCtrl'
}
}
})
tabs.html looks like this:
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
<!--Practice Tab -->
<ion-tab title="Events" icon-off="ion-ios-arrow-forward " icon-on="ion-ios-arrow-forward-utline" href="#/tab/events">
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-tab>
</ion-tabs>
menu.html:
<ion-side-menus enable-menu-with-back-views="true">
<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">My app</h1>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item nav-clear menu-close href="#/events">
Events
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It does not work though.Is it possible to do it? If not what are the alternative?
Yes, you can add multiple abstract states.
Here is the Documentation for Angular states. According to the docs:
An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.
I'm developing an App with Ionic Framework, and I only want to show a side-menu in some concrete views, but not in every view.
I' have my menu.html file:
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content class="mymenu">
<div id="menu-list">
<ion-list class="list">
<ion-item item-type="item-icon-left" nav-clear menu-close href="#">
<i class="icon ion-home"></i><span>Menu Item</span>
</ion-item>
...
</ion-list>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My index.html's body tag looks exactly like this:
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>
And the JavaScript code where I set up my App states:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
.state('app.page2', {
url: "/page2",
views: {
'menuContent' :{
templateUrl: "templates/page2.html"
}
}
})
// etc...
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/page1');
});
page1.html and page2.html both contain the following structure:
<ion-view title="something">
<ion-content>
... // here comes the html content of the page
</ion-content>
</ion-view>
What can I actually do to only show my side-menu (menu.html) on page1.html and not on page2.html?? Is there anything I'm missing??
Is there a way of inserting the menu.html content only on those pages I want it to appear and forgetting about creating the state that uses it as templateUrl?
The reason why your all your pages have side menu is because you 'app' state as their parent state. When a state is activated, its templates are automatically inserted into the <ion-view> of its parent state's template. If it's a top-level state, because it has no parent state then its parent template is index.html. The app state has the side menu in it.
Your code should look like this:
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
//this state has the 'app' state (which has the sidemenu) as its parent state
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
//this state has no parent, so it uses 'index.html' as its template. The index page has no
//sidemenu in it
.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html"
}
})
///more code here
});
Check out https://github.com/angular-ui/ui-router/wiki
if your problem is simple , use
onExit: function(){
angular.element(document.querySelector('#menuAPP')).removeClass('hidden');
}
into state
just add hide-nav-bar=" true " in ion-view
<ion-view title="Login" **hide-nav-bar="true"** id="page" class=" "> </ion-view>