I have a tab view inside of my navigation but the content pages stay blank. I tried lots of different app.config settings but nothing works. I want to have the tab views as separate HTML files so I have to get this working. :/
index.html (the main page of the app):
<ion-pane>
<ion-nav-bar align-title="center" class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-title>
<img class="titleLogo" ng-src="img/headers/logo_tabbar.png" />
</ion-nav-title>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
home.html (this is the page where you get navigated to):
<ion-view ng-controller="mainCtrl">
<ion-tabs class='tabs-icon-top tabs-light'>
<ion-tab title="diary" href="#/diary">
<ion-nav-view name="tab-diary"></ion-nav-view>
</ion-tab>
<ion-tab title="report" href="#/report">
<ion-nav-view name="tab-report"></ion-nav-view>
</ion-tab>
<ion-tab title="rewards" href="#/rewards">
<ion-nav-view name="tab-rewards"></ion-nav-view>
</ion-tab>
<ion-tab title="messages" href="#/messages">
<ion-nav-view name="tab-messages"></ion-nav-view>
</ion-tab>
<ion-tab title="settings" href="#/settings">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
diary.html (for example one of the tabs):
<ion-view view-title="Diary" ng-controller="diaryCtrl">
<ion-content>
diarytest</br>
diarytest
</ion-content>
app.js (the config file):
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('welcome',{
url: '/welcome',
templateUrl: 'templates/welcome.html'
});
$stateProvider.state('login',{
url: '/login',
templateUrl: 'templates/login.html'
});
$stateProvider.state('register',{
url: '/register',
templateUrl: 'templates/register.html'
});
$stateProvider.state('home',{
url: '/home',
templateUrl: 'templates/home.html'
});
$stateProvider.state('diary',{
url: '/diary',
views:{
'tab-diary':{
templateUrl: 'templates/diary.html'
}
}
});
$stateProvider.state('report',{
url: '/report',
views:{
'tab-report':{
templateUrl: 'templates/report.html',
controller: 'reportCtrl'
}
}
});
$stateProvider.state('rewards',{
url: '/rewards',
views:{
'tab-rewards':{
templateUrl: 'templates/rewards.html',
controller: 'rewardsCtrl'
}
}
});
$stateProvider.state('messages',{
url: '/messages',
views:{
'tab-messages':{
templateUrl: 'templates/messages.html',
controller: 'messagesCtrl'
}
}
});
$stateProvider.state('settings',{
url: '/settings',
views:{
'tab-settings':{
templateUrl: 'templates/settings.html',
controller: 'settingsCtrl'
}
}
});
$urlRouterProvider.otherwise('/welcome');
});
I noticed two things:
<ion-view> tag not closed by corresponding </ion-view> closing tag
ng-controller="diaryCtrl" directly declared on ion-view instead of being declared in $stateProvider as:
'tab-diary':{
templateUrl: 'templates/diary.html',
controller: 'diaryCtrl'
}
However I suggest to check a working Ionic "tabbed" application, for example:
tabs: http://codepen.io/beaver71/pen/LGZvvb
tabs and side menu: http://codepen.io/beaver71/pen/WrqgNm
Related
i am new to IONIC.
I want to implement tabbed with sidemenu project.
means i have sidemenu, on clicking one of sidemenu option there will be a page having tab. i wrote code for it but pages are not redirecting of tab page.
my app.js
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.tabs', {
url: "/tabs",
views: {
'menuContent': {
templateUrl: "templates/tabs.html"
}
}
})
.state('app.tabs.currentrides', {
url: '/currentrides',
views: {
'currentrides': {
templateUrl: 'templates/currentrides.html',
controller: 'CurrentRidesCtrl'
}
}
})
.state('app.tabs.rideshistory', {
url: '/rideshistory',
views: {
'rideshistory': {
templateUrl: 'templates/rideshistory.html',
controller: 'RidesHistoryCtrl'
}
}
})
my tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive" >
<!-- Current Tab -->
<ion-tab title="Current Rides" ui-href="app.tabs.currentrides">
<ion-nav-view name="currentrides"></ion-nav-view>
</ion-tab>
<!-- History Tab -->
<ion-tab title="Rides History" ui-href="app.tabs.rideshistory">
<ion-nav-view name="rideshistory"></ion-nav-view>
</ion-tab>
</ion-tabs>
pages of tab not redirecting.
Answer :
<ion-tabs class="tabs-icon-top tabs-color-active-positive" >
<!-- Current Tab -->
<ion-tab title="Current Rides" href="#/app/tabs/currentrides">
<ion-nav-view name="currentrides"></ion-nav-view>
</ion-tab>
<!-- History Tab -->
<ion-tab title="Rides History" href="#/app/tabs/rideshistory">
<ion-nav-view name="rideshistory"></ion-nav-view>
</ion-tab>
</ion-tabs>
For some reason one of my tabs(the chat tab) doesn't work. All the other tabs work i'm not sure why the chat tab doesn't work. As you can see from my plunker the chats tab is just blank while the other tabs show content. In my actual app the title bar shows but has the text of the previous tab.
So heres my plunker:
http://plnkr.co/edit/k4SknwdMDM2TWJMuRdXj?p=preview
Heres some code:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
Chat.html
<ion-view view-title="Chats">
<ion-content>
asdsadsa
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="chat.closet">
<h2>{{chat.email}}</h2>
<p>{{chat.heightFt}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
tabs.html:
<!--
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>
<ion-tab title="Settings" hidden="true">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'firebase', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform, $rootScope, $firebaseObject) {
$rootScope.ref = new Firebase("https://vivid-fire-3325.firebaseio.com");
$rootScope.isLoggedIn = false;
$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 && 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) {
// 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: 'tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'tab-account.html',
controller: 'AccountCtrl'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'tab-settings.html',
controller: 'SettingsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
Thanks.
EDIT:
Named the chat file in the plunker incorrectly. Changed the name of Chat.html to Chats.html. It still does not work however, here is the new plunker:
http://plnkr.co/edit/k4SknwdMDM2TWJMuRdXj?p=preview
Your tab activates that means, problem has to do something with your view.
Change tab-chats.html to tab-chat.html
I tried many solutions to display side menu button but none appears to work. Let me know what I am missing. I want to have left side menu burger icon on my left side along with the tabs as well.
If anything else you need from my side, let me know please.
app.js
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.activity', {
url: '/tab-activity',
views: {
'tab-activity': {
templateUrl: 'templates/tab-activity.html',
controller: 'tabActivityCtrl'
}
}
})
.state('tab.profile', {
url: '/tab-profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'tabProfileCtrl'
}
}
})
Following is my content in tabs.html file -
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="snd" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Second Section Left Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="snd.home" nav-clear class="item">Home</a>
<a ui-sref="snd.chat" nav-clear class="item">Chat</a>
<a ui-sref="snd.drink" nav-clear class="item">Drink</a>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity">
<ion-nav-view name="tab-activity"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
Create a specific controller (in the example below is 'NavCtrl') and attach to <ion-side-menu> with ngController directive. In that controller you add the $ionicSideMenuDelegate.toggleLeft(); method.
Here is a working snippet:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.activity', {
url: '/tab-activity',
views: {
'tab-activity': {
templateUrl: 'templates/tab-activity.html',
controller: 'tabActivityCtrl'
}
}
})
.state('tab.profile', {
url: '/tab-profile',
views: {
'tab-profile': {
templateUrl: 'templates/tab-profile.html',
controller: 'tabProfileCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/tab-activity");
})
.controller('NavCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.showMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('tabActivityCtrl', function($scope) {})
.controller('tabProfileCtrl', function($scope) {});
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content ng-controller="NavCtrl">
<ion-nav-bar class="bar-energized nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
</button>
</ion-nav-buttons>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Second Section Left Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<li>
<a class="item" menu-close nav-clear href="#/tab/home">Home</a>
</li>
<li>
<a class="item" menu-close href="#/tab/chat">Chat</a>
</li>
<li>
<a class="item" menu-close href="#/tab/drink">Drink</a>
</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-footer">
<a class="button button-fullwidth" ui-sref="snd.policy" ng-click="toggleLeft()">Privacy Policy</a>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Activity Tab -->
<ion-tab title="Activity" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/tab-activity">
<ion-nav-view name="tab-activity"></ion-nav-view>
</ion-tab>
<!-- Profile Tab -->
<ion-tab title="Profile" icon-off="ion-ios-people" icon-on="ion-ios-people" href="#/tab/tab-profile">
<ion-nav-view name="tab-profile"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/tab-activity.html" type="text/ng-template">
<ion-view title="tab-activity">
<ion-content>
<h3>tab-activity</h3>
<p>Example of Ionic tabs. Navigate to each tab, and navigate to child views of each tab and notice how each tab has its own navigation history.</p>
</ion-content>
</ion-view>
</script>
<script id="templates/tab-profile.html" type="text/ng-template">
<ion-view title="tab-profile">
<ion-content>
<h3>tab-profile</h3>
<p>bla bla bla </p>
</ion-content>
</ion-view>
</script>
</body>
</html>
Have you added the Delegate function? :
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
I want to make an app with ionic which has three different main layouts.
with no header just an bg-image and a input field
header with one button and a list
heade with two buttons and than four tabs
how do I habe to structer the layouts? My first idea was:
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
And than for layout 2 (overview.html):
<ion-nav-bar class="bar-balanced">
<ion-nav-buttons side="primary">
...
</ion-nav-buttons>
</ion-nav-bar>
<ion-view view-title="Title Page 2" class="has-header">
<ion-content>
...
</ion-content>
</ion-view>
And for layout 3:
The abstract layout (tabs.html):
<ion-nav-bar class="bar-balanced has-tabs-top">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="primary">
...
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-striped tabs-top tabs-background-balanced">
<ion-tab title="Dash" icon-off="ion-android-chat" icon-on="ion-android-chat" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
...
</ion-tabs>
And the specific tab-layout (tab-dash.html):
<ion-view view-title="Dashboard">
<ion-content>
...
</ion-content>
</ion-view>
My app.js:
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('overview', {
url: '/',
templateUrl: 'templates/overview.html',
controller: 'OverviewCtrl'
})
This doesn't work correct... the title from layout 2 doesn't show up and the tabs doesn't "fusion" with the header correct. Is the hole structer wrong or just the layout files?
You can put the nav bar inside your "root" index.html and control its visibility using the following attributes which might prevent you from having to declare multiple nav-bars in different files.
<ion-view view-title="My View Title" hide-nav-bar="true">
in ionics started template for tabbed applications the suggested approach appears to be to place the navbar outside
Source: https://github.com/driftyco/ionic-starter-tabs/blob/master/index.html
Plnkr for Starter Template with Tabs: http://plnkr.co/edit/qYMCrt?p=preview
I have an ionic app set up with a similar navigation style as this codepen:
http://codepen.io/calendee/pen/JdtuG
HTML:
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view></ion-nav-view>
<script id="entry.html" type="text/ng-template">
<ion-nav-bar animation="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back">
</ion-nav-bar>
<ion-view title="{{navTitle}}" class="bubble-background">
<ion-content has-header="true" padding="true">
<h1>Entry Page!</h1>
<a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 1 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 2 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 3 Content</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="mainContainer.html" type="text/ng-template">
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"
animation="nav-title-slide-ios7"
>
</ion-nav-bar>
<ion-nav-view name="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Side Menu</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="entry" class="item">Back To Entry Page</a>
<a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Home Page!</h1>
<a ui-sref="main.info" class="button button-positive">Info</a>
</ion-content>
</ion-view>
</script>
<script id="info.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Info Page!</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
Javascript:
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url : '/entry',
templateUrl : 'entry.html',
controller : 'EntryPageController'
})
.state('main', {
url : '/main',
templateUrl : 'mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'home.html',
controller : 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'info.html',
controller : 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'tabs.html',
controller : 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', [ '$scope', function($scope) {
$scope.toggleMenu = function() {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function() {
$state.go('main.home');
}
}])
.controller('HomePageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
I have search and tried many different things but I can't seem to figure out how to add a modal to one of the pages. I can do it in a simpler app with only one type of navigation, but this codepen has two types of navigation (side menu and tabs on certian pages) and the controllers are split differently then I am used to and I don't know where to initialize the $ionicModal. I have tried putting in the main controller as well as the home page controller, but if I do, then I get a blank page. Any help would be very much appreciated!
Sorry if I am doing this wrong. I usually don't come on here often.
You should post your attempt that didn't work. Then I could help more. However, my wild guess is that the template path you specified is not correct.
Also, please don't post so much code. Most of this is irrelevant to the issue. If you want someone to take time to help, then take time to ask concisely.
Here is a working modal example: http://codepen.io/calendee/pen/AHIuh/
// Load the modal from the given template URL
$ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
$scope.modal = $ionicModal;
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
});
and then on your button (or whatever opens the modal)
ng-click="modal.show()"