Nested ion-nav-view implementation - javascript

I am trying to learn angular with ionic and trying to understand nested ion-nav-views concept.
Now I have a tabs template code like -
<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-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Show All" 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>
<ion-tab title="Collect Stamps" 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>
<ion-tab title="Order Food" 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>
<ion-tab title="Reserve a table" icon-off="ion-ios-rainy" icon-on="ion-ios-rainy" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left in Menu</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-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
For app.js code -
$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'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
Now the ion-tabs always load properly but there are never any content for any of the nested nav-views.
So I have the outer nav-view with name as menuContent and inner nav-view with name as "tab-chats" / "tab-dash" etc.
If I remove the outer nav-view then the content gets loaded properly.
I want to understand the reason for same for how I can mention in my app.js state for the nested inner nav-view directly.

Related

Ionic - both sidemenu and tabs

I need to implement both a sidemenu and tabs on the same screen in my Ionic app project.
It is working (almost). I want my bottom tabs to be visible always, but I also want to be able to navigate to other (then tab) view from the sidemenu.
It should keep all tabs menu visible but with all items inactive.
My states definition:
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/base.html'
})
.state('app.locations', { // this view doesn't work, when I navigate to it, it changes view title only.
url: '/locations',
views: {
'menuContent': {
templateUrl: 'templates/views/locations.html',
controller: 'LocationsCtrl'
}
}
})
.state('app.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tabs/home.html',
controller: 'HomeCtrl'
}
}
})
.state('app.history', {
url: '/history',
views: {
'tab-history': {
templateUrl: 'templates/tabs/history.html',
controller: 'HistoryCtrl'
}
}
})
.state('app.messages', {
url: '/messages',
views: {
'tab-messages': {
templateUrl: 'templates/tabs/messages.html',
controller: 'MessagesCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
My base.html template:
<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> <!-- IS IT OK?? -->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Home" icon-off="ion-ios-home" icon-on="ion-ios-home" ui-sref="app.home">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<ion-tab title="History" icon-off="ion-ios-clock-outline" icon-on="ion-ios-clock-outline" ui-sref="app.history">
<ion-nav-view name="tab-history"></ion-nav-view>
</ion-tab>
<ion-tab title="Messages" icon-off="ion-ios-email-outline" icon-on="ion-ios-email-outline" ui-sref="app.messages" badge="2" badge-style="badge-assertive">
<ion-nav-view name="tab-messages"></ion-nav-view>
</ion-tab>
</ion-tabs>
</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 class="item item-divider">Location: B17726</ion-item>
<ion-item menu-close href="#/app/locations">
Login
</ion-item>
<ion-item menu-close>
Search
</ion-item>
<ion-item menu-close>
Browse
</ion-item>
<ion-item menu-close>
Playlists
</ion-item>
<ion-item class="item item-divider">
General
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Basically, I want to have bottom tabs always visible, event no of its items is active. When one of tabs is clicked, I want to show it as normal.
Would comment if I could (no rep woes) but here's the track I'm currently looking down if this helps you at all or gives you a flash of inspiration. I'm trying to figure this out as well.
Here's a similar question on the Ionic Forums: http://forum.ionicframework.com/t/show-tab-bar-on-pages-not-children-of-the-tab-bar/726
The last comment mentions an Angular method called $ionicTabsDelegate with a method called showBar(show) which takes a boolean on whether or not to show the tabs bar.
Ref: http://ionicframework.com/docs/api/service/%24ionicTabsDelegate/
Here's the code I've currently produced, though it doesn't seem to work (hopefully it's close)?
index.html
<ion-content class="side-menu-left" ng-controller="AppCtrl">
<ion-list <!--Irrelevant Stuff Here-->>
<ion-item ui-sref="aboutUs" <!--Irrelevant Stuff Here--> ng-click="showTabs()" menu-close>
<i class="icon ion-information-circled"></i>About Us</ion-item>
<!-- More Menu Items Here etc. -->
controllers.js
.controller('AppCtrl', function($scope, $ionicTabsDelegate) {
$scope.showTabs = function() {
$ionicTabsDelegate.showBar(true);
};
});
Edit: Here is another Ionic forum post on this subject along with what seems to be a working Codepen example.
forum.ionicframework.com/t/using-sidemenu-and-tabs-together/2311
codepen.io/gnomeontherun/pen/tbvdH

Ionic Side Menu Issue

I'm having an issue with my homepage and side-menu, whenever I try to enter the home page it bounces back to my "otherwise" view. Whenever I remove the implementation of the menu, in the app.js, my homepage works fine. Instead of using the starter-menu https://github.com/driftyco/ionic-starter-sidemenu, I decided to use a blank version, so that I can learn as much as I need to know about Ionic... The following is my code.
app.js
.config(function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state('intial', {
url: '/',
templateUrl: 'auth/Walkthrough.html',
controller: 'WalkthroughCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'auth/Login.html',
controller: 'LoginCtrl'
})
.state('sign', {
url: '/sign',
templateUrl: 'auth/SignUp.html',
controller: 'SignUpCtrl'
})
.state('app', {
url: '/app',
abstract: false,
templateUrl: 'app/menu.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'app/Home.html',
controller: 'HomeCtrl'
}
}
})
});
Home.html
<ion-view title="Home">
<ion-pane class="animated fadeIn" style="background-color: #4da6b1">
<ion-nav-bar align-title="center">
<ion-nav-title>
<span style="color: white">Home</span>
</ion-nav-title>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon-round" style="color: white; background-color:#028090;" ></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="has-header" style="margin-top: 10px;" data-tap-disabled="true">
<!-- <div class=".col" style=" margin-left: 2px;border: 1px solid white; width: 50%; height: 50%; border-radius: 5px;">
</div> -->
</ion-content>
</ion-pane>
</ion-view>
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i>Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<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 menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Please help.
In html page button you dont have ng-click
This is the format for ionic side menus
<ion-side-menu-content>
<!-- Main content, usually <ion-nav-view> -->
</ion-side-menu-content>
<!-- Right menu -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
This should be inside your controller
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
For more information about ionic side menu please refer this.
Also in href="#/app/browse",
href="#/app/search",
href="#/app/playlists"
All this page is not defined in your .config so create those pages and add them in your .config and you dont need all the href.
For $state.go('home'); you should inject ui.router in your module and download angular-ui-router.min.js and add it to your project or look this so it will work.

Angular routing issue - ionic header not updated in tab

Have begun the hockey stick learning curve of angular and ionic and following along on a Linda course. I made some type of routing mistake (most likely a typo) and are stuck..
The problem is that my header don't update for the calendar tab, it just uses the last header.
app.js
//... angluar.module('starter', ['ionic']) ... .run(..) ...
.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'
}
}
})
.state('tabs.list', {
url: '/list',
views: {
'list-tab': {
templateUrl: 'templates/list.html',
controller: 'ListController'
}
}
})
.state('tabs.detail', {
url: '/list/:aId',
views: {
'list-tab': {
templateUrl: 'templates/detail.html',
controller: 'ListController'
}
}
})
.state('tabs.calendar', {
url: '/calendar',
views: {
'calendar-tab': {
templateUrl: 'templates/calendar.html',
controller: 'CalendarController'
}
}
})
;
$urlRouterProvider.otherwise('/tab/home');
})
// ... controllers ...
tabs.html
<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="Artist" icon="ion-ios-people" href="#/tab/list">
<ion-nav-view name="list-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Calendar" icon='ion-calendar' href="#/tab/calendar">
<ionic-nav-view name="calendar-tab"></ionic-nav-view>
</ion-tab>
</ion-tabs>
calendar.html
<ion-view view-title="Calendar">
<ion-content class="has-subheader">
<!--SEARCH ELEMENT-->
<div class="bar bar-subheader
item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search">
</label>
</div>
</ion-content>
</ion-view>
Any help will be highly appreciated.
Typo in your HTML
it should be ion-nav-view instead of ionic-nav-view
<ion-nav-view name="calendar-tab"></ion-nav-view>
instead of
<ionic-nav-view name="calendar-tab"></ionic-nav-view>

ionic routing not working like what I expected

The structure of my app:
The main app.js at root:
angular.module('app', ['ionic',
'app.intro',
'app.main',
'app.services'
])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
......
});
})
.config(function($stateProvider, $urlRouterProvider) {
});
app/intro/intro.js:
angular.module('app.intro',['app.intro.controller'])
.config(function($stateProvider, $urlRouterProvider) {
alert('app.intro');
$stateProvider
.state('intro', {
url: '/',
templateUrl: 'app/intro/index.html',
controller: 'IntroCtrl'
});
$urlRouterProvider.otherwise('/');
});
app/intro/controller.js
angular.module('app.intro.controller',[])
.controller('IntroCtrl',function($scope,$state,$ionicSlideBoxDelegate) {
$scope.startMain = function() {
$state.go('main');
};
});
It works fine. The intro page being shown correctly until I add the main module which is a sidemenu.
app/main/main.js:
angular.module('app.main',['app.main.controller'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/menu.html',
controller: 'MainCtrl'
})
.state('main.news', {
url: '/news',
views: {
'menuContent': {
templateUrl: 'app/main/news.html'
}
}
})
.state('main.share', {
url: '/share',
views: {
'menuContent': {
templateUrl: 'app/main/share.html'
}
}
});
$urlRouterProvider.otherwise('/main/news');
});
The intro page will not be shown anymore. Instead the news page will always be shown when app starts. I'm very new to ionic so that I'm not very familiar with the url routing. Can anybody tell what I did wrong? Thanks.
Edit:
menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<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">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/main/news">News</ion-item>
</ion-list>
<ion-list>
<ion-item menu-close ng-click="logout()">Logout</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
I believe the issue is the "." in your route names, this bit me too but i believe this refers to a substate and wont do a full route transition. If you remove the dots it should work properly.
Also, $urlRouterProvider.otherwise('/main/news'); will default pages to news

ion-nav-view with nested ion-nav-view not working

I have a strange problem with ion-nav-view nesting. When I load the application in a browser, I can see the URL is getting changed to /app/menu, but no contents from menu.html appear on the page. The page is blank.
Following is the code snippet
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.
state("app", {
url: "/app",
abstract: true,
templateUrl: "templates/default.html",
controller: "AdaptiveController"
})
.state("app.menu", {
url: "/app/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
});
$urlRouterProvider.otherwise("/app/menu");
})
default.html
<ion-view>
<ion-content>
<ion-nav-view name="page-content"></ion-nav-view>
</ion-content>
</ion-view>
menu.html
<ion-view>
<ion-header-bar class="bar bar-positive bar-header" align-title="center" no-tap-scroll="true">
<div class="buttons buttons-left header-item">
<span class="left-buttons"></span>
</div>
<div class="bar bar-header bar-positive header-item">Welcome</div>
<div class="buttons buttons-right header-item">
<span class="right-buttons"></span>
</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item class="item item-icon-left">
<i class="icon ion-person"/>
<h3>Profile</h3>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
If I change the code in default.html to following it works.
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-view name="page-content"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
Does than mean ion-nav-view either need tab or ion-side-menus? Can't it work with ion-view?
Try change the code:
.state("app.menu", {
url: "/app/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
to
.state("app.menu", {
url: "/menu",
views: {
"page-content": {
templateUrl: "templates/menu.html",
controller: "MenuController"
}
}
in hrefs continue write #/app/menu

Categories