I have some problem. I really can't understand how it work.
In app.js i create state like this:
`...
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
controller: 'AppController',
templateUrl: "templates/menu.html"
})
.state('app.search', {
url: '/search',
views: {
'searchContent' : '<h1>ANTOHER CONTENT</h1>',
'menuContent': {
templateUrl: 'templates/test.html',
controller: 'TestController'
}
}
})
...`
You can see, two views "searchContent" and "menuContent".
Then i create two templates:
In this template, for tags, i added two names like in app.js
menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable" name="searchContent">
<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 href="#/app/search">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
test.html:
<ion-view>
<ion-content>
Some content
</ion-content>
</ion-view>
index.html:
...
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
...
But on search page, searchContent no replaced by "<h1>ANTOHER CONTENT</h1>". How to fix this ?
First of all <ion-nav-bar></ion-nav-bar> is not used for rendering views and content but for the top navigation. Views are for <ion-view> or <ion-nav-view>
Secondly, In my opinion... One view is sufficient. I'm not sure what you were trying to achieve with the first content but if you just want to change the title of the page you can try this...
<ion-nav-bar class="bar-stable" name="searchContent">
<ion-nav-back-button>
</ion-nav-back-button>
<h1>ANTOHER CONTENT</h1>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
OR
use <ion-nav-title></ion-nav-title> inside your test.html or any page you want... http://ionicframework.com/docs/api/directive/ionNavTitle/
Hope this helps! :D
Related
I'm trying to get tabs working but no matter what I try I can't get tab content to show below the tab bar. Here is my view:
<ion-view title="My Bookings">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-tabs class="tabs-color-positive tabs-striped">
<ion-tab title="Current Booking" ui-sref="bookings/current">
<ion-list class="bookings has-header has-tabs-top">
<ion-item ng-repeat="booking in bookings">
<div class="info">
<p class="name">{{booking.name}}</p>
<p class="date">{{booking.date}}</p>
<p class="time">{{booking.time}}</p>
</div>
<button class="cancel-button">Cancel Booking</button>
</ion-item>
</ion-list>
</ion-tab>
<ion-tab title="Past Booking" ui-sref="bookings/past"></ion-tab>
</ion-tabs>
</ion-view
This is what it looks like right now:
I have tried using has-header and has-tabs-top on everything but it didn't help.
Note: I've configured tabs to be always on top like this (as per Ionic docs):
.config(function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('top');
})
I'm using Ionic 1.3.1.
Edit
This is what I have after Sam5487's answer:
.state('bookings', {
url: '/bookings',
templateUrl: 'templates/bookings/bookings.html'
})
.state('bookings.current', {
url: '/bookings/current',
templateUrl: 'templates/bookings/current_bookings.html',
controller: 'CurrentBookingsController'
})
.state('bookings.past', {
url: '/bookings/past',
templateUrl: 'templates/bookings/past_bookings.html',
controller: 'PastBookingsController'
})
bookings.html:
<ion-view title="My Bookings">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-tabs id="bookings-view" class="bookings-view tabs-color-positive tabs-striped">
<ion-tab title="Current Booking" ui-sref="bookings.current">
<ion-nav-view name="currentBookings"></ion-nav-view>
</ion-tab>
<ion-tab title="Past Booking" ui-sref="bookings.past">
<ion-nav-view name="pastBookings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
current_bookings.html:
<ion-view title="Current Bookings">
<ion-content>
<ion-list class="bookings">
<ion-item ng-repeat="booking in bookings">
<div class="info">
<p class="name">{{booking.name}}</p>
<p class="date">{{booking.date}}</p>
<p class="time">{{booking.time}}</p>
</div>
<button class="cancel-button">Cancel Booking</button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
However, tab content is empty for some reason :(
You are not wrapping with <ion-content></ion-content> at all in your code, and the structuring could be better, do so like below.
<body>
<ion-nav-view>
</ion-nav-view>
<ion-tabs class="tabs-color-positive tabs-striped">
<ion-tab title="Current Booking" ui-sref="bookings/current">
<ion-nav-view name="currentBooking">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-view title="My Bookings">
<ion-content>
<ion-list>
<ion-item ng-repeat="booking in bookings">
<div class="info">
<p class="name">{{booking.name}}</p>
<p class="date">{{booking.date}}</p>
<p class="time">{{booking.time}}</p>
</div>
<button class="cancel-button">Cancel Booking</button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</ion-nav-view>
</ion-tab>
<ion-tab title="Past Booking" ui-sref="bookings/past"></ion-tab>
</ion-tabs>
</body>
Here is a working codepen (note: didn't add mock data, but you can see there is no overlapping with hardcoded text. Add mock data in the JS to see for yourself).
However, I would suggest strucuting your project differently.
->www
->css
->js (controllers.js, services.js, directives.js, routes.js, app.js)
->lib (external libs)
->plugins
->tempaltes
->tabs.html
->currentBookings.html
->pastBookings.html
tabs.html will consist of your tabs tmeplate only, so when you add more it is quite easy (I add back buttons for each tab since they each have their own stack history), exmaple:
<ion-tabs class="tabs-color-positive tabs-striped">
<ion-tab title="Current Booking" ui-sref="bookings/current">
<ion-nav-view name="currentBookings">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
</ion-nav-view>
</ion-tab>
<ion-tab title="Past Booking" ui-sref="bookings/past">
<ion-nav-view name="pastBookings">
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
</ion-nav-view>
</ion-tab>
.
.
</ion-tabs>
Your current bookings page will look like this: currentBookings.html
<ion-view title="My Bookings">
<ion-content>
<ion-list class="bookings">
<ion-item>
<div ng-repeat="booking in bookings"">
<p class="name">{{booking.name}}</p>
<p class="date">{{booking.date}}</p>
<p class="time">{{booking.time}}</p>
</div>
<button class="cancel-button">Cancel Booking</button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
And for the other page: pastBookings.html
<ion-view title="Past Bookings">
<ion-content>
//Your content here.
</ion-content>
</ion-view>
Take a look at the Ionic documentation on structuring, routing, and navigation here. It is very important to understand how views work.
EDIT 2
Your angular routing should look like this:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('bookings', {
url: '/bookings',
abstract: true,
templateUrl: 'templates/bookings/bookings.html'
})
// Each tab has its own nav history stack:
.state('bookings.current', {
url: '/current',
views: {
'currentBookings': {
templateUrl: 'templates/bookings/current_bookings.html',
}
}
})
.state('bookings.past', {
url: '/past',
views: {
'pastBookings': {
templateUrl: 'templates/bookings/past_bookings.html',
}
}
});
$urlRouterProvider.otherwise('/bookings/current');
});
Try to add ion-tab inside tag <ion-nav-view>:
<body ng-app="starter">
<!-- The nav bar that will be updated as we navigate -->
<ion-nav-bar class="bar-positive">
</ion-nav-bar>
<!-- where the initial view template will be rendered -->
<ion-nav-view>
<ion-view>
<ion-content>Hello!</ion-content>
</ion-view>
</ion-nav-view>
</body>
My Ionic App has a tab bar controller at the bottom of the view - and at the moment I have 5 buttons on it. However, I want to add 4 more, but to do so I need to turn the last of the Four buttons into a "More..." button, because otherwise the text on the other buttons runs into each other.
is there a way automatically creates a more button in ionic.?
Thanks.
As you stated that you wanted the options in the side menu, I've found a working example for you in codepen.
It should contain all the information you need to get it working.
<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="https://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content ng-controller="NavCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</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-buttons side="right">
<button class="button button-icon button-clear ion-ios7-gear" ng-click="showRightMenu()">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<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">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/facts">Facts</a>
</li>
<li>
<a class="item" menu-close href="#/tab/facts2">More Facts</a>
</li>
</ul>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Right Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<li>
<a class="item" menu-close nav-clear href="#/search">Search</a>
</li>
<li>
<a class="item" menu-close nav-clear href="#/settings">Settings</a>
</li>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script id="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-ios7-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content>
<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>
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="facts.html" type="text/ng-template">
<ion-view title="Facts">
<ion-content>
<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="facts2.html" type="text/ng-template">
<ion-view title="Also Factual">
<ion-content>
<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="about.html" type="text/ng-template">
<ion-view title="About">
<ion-content>
<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="nav-stack.html" type="text/ng-template">
<ion-view title="Tab Nav Stack">
<ion-content>
<p><img src="https://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
</ion-content>
</ion-view>
</script>
<script id="contact.html" type="text/ng-template">
<ion-view title="Contact">
<ion-content>
<p>#IonicFramework</p>
<p>#DriftyCo</p>
</ion-content>
</ion-view>
</script>
<script id="settings.html" type="text/ng-template">
<ion-view title="Settings">
<ion-content>
Settings page
</ion-content>
</ion-view>
</script>
<script id="search.html" type="text/ng-template">
<ion-view title="Search">
<ion-content>
Search page
</ion-content>
</ion-view>
</script>
</body>
</html>
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('search', {
url: '/search',
templateUrl: 'search.html'
})
.state('settings', {
url: '/settings',
templateUrl: 'settings.html'
})
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "facts.html"
}
}
})
.state('tabs.facts2', {
url: "/facts2",
views: {
'home-tab': {
templateUrl: "facts2.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "about.html"
}
}
})
.state('tabs.navstack', {
url: "/navstack",
views: {
'about-tab': {
templateUrl: "nav-stack.html"
}
}
})
.state('tabs.contact', {
url: "/contact",
views: {
'contact-tab': {
templateUrl: "contact.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('NavCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.showMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.showRightMenu = function () {
$ionicSideMenuDelegate.toggleRight();
};
})
.controller('HomeTabCtrl', function($scope) {
});
The following button icon at the side menu is not showing...
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-bar>
</ion-pane>
<ion-side-menu side="left"></ion-side-menu>
</ion-side-menus>
The buttons won't show because you'll have to use them inside the <ion-view>tag and inside <ion-nav-buttons> tag.
See the following example from the Ionic Framework Documentation (link)
<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
<ion-view>
<ion-nav-buttons side="primary">
<button class="button" ng-click="doSomething()">
I'm a button on the primary of the navbar!
</button>
</ion-nav-buttons>
<ion-content>
Some super content here!
</ion-content>
</ion-view>
</ion-nav-view>
I have fixed the code as below. Thanks!!!
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<ion-nav-buttons>
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
</ion-pane>
<ion-side-menu side="left">
</ion-side-menu>
</ion-side-menus>
You can also disable menus with logic:
<ion-menu id="NavMenu" persistent="true" [content]="content">
Be sure you haven't got some code like this hanging around!
import { MenuController} from 'ionic-angular';
...
constructor(
private menuCtrl: MenuController
) {
}
...
// In some other method..
// When you only have one ion menu in the template....
this.menuCtrl.enable(false, 'NavMenu');
Does anyone know how can I add a back button to the second level? In my example I need the back button when I'm on the "Settings" page:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear" ng-click="goBack()">Back</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="primary"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" class="side-menu" slide-along offset="-15">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<a href="#/event/settings" class="item" menu-close>Settings</a>
</ul>
</ion-content>
</ion-side-menu>
If I remove menu-close from the button, it's acting weird.
I have a tabs.html setup with four page-tabs in it. One of these pages contains six items and upon selecting an item I want a new page to slide into view but it won't be one of the other tab items.
Is it better have the new page as a hidden tab or to have it be a page outside of the tabs? I need to pass the existing page's $scope data to transfer to new page (for data of the item tapped on) and I need the new page to animate the new page in.
You want the other page to be outside of the tabs. If you try to make a 'fake' tab, I can only imagine that will be the source of much pain and many bugs. It is best to use things as intended instead of hacking on top of them. You may want to consider a side menu to expose navigation that doesn't fit into normal tabs interactions.
See my codepen here for one quickly hacked together example. http://codepen.io/gnomeontherun/pen/OVLQYL?editors=101
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomeCtrl',
templateUrl: 'home.html'
})
.state('item', {
url: '/:item',
controller: 'ItemCtrl',
templateUrl: 'item.html'
});
$urlRouterProvider.otherwise('/');
})
.controller('HomeCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
$scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
$ionicModal.fromTemplateUrl('modal.html', {
animation: 'slide-in-up',
scope: $scope
}).then(function (modal) {
$scope.modal = modal;
});
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
}
$scope.openModal = function () {
$scope.modal.show();
}
$scope.form = {};
$scope.addStooge = function () {
console.log($scope);
$scope.stooges.push({name: $scope.form.name});
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
.controller('ItemCtrl', function ($scope, $stateParams) {
$scope.item = $stateParams.item;
});
<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>Ionic Modal</title>
<link href="http://code.ionicframework.com/1.0.0-rc.3/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-rc.3/js/ionic.bundle.js"></script>
</head>
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon"><span class="icon ion-ios-arrow-left"></span></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
<ion-content>
<ion-list>
<ion-item href="#/" menu-toggle="left">Home</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right" >
<ion-header-bar class="bar-header bar-dark">
<h1 class="title">Search</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-plus" ng-click="openModal()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-positive">
<ion-tab title="Stooges">
<ion-content class="has-header">
<h4>The Stooges</h4>
<ion-list>
<ion-item ng-repeat="stooge in stooges" href="#/{{stooge.name}}">{{stooge.name}}</ion-item>
</ion-list>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2">
<ion-content class="has-header">
<h2>Just another tab, for another reason</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar class="bar-header bar-positive">
<h1 class="title">New Stooge</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">Cancel</button>
</ion-header-bar>
<ion-content>
<div class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input ng-model="form.name" type="text" name="name" />
</label>
<button class="button button-full button-positive" ng-click="addStooge()">Create</button>
</div>
</div>
</ion-content>
</div>
</script>
<script id="item.html" type="text/ng-template">
<ion-view title="{{item}}">
<ion-content>
<h1>{{item}}</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>