I develop a mobile web app with Ionic Framework.
When I was using ionic beta-13 with angular 1.3.0, the ng-show worked fine. But after the update to ionic beta-14 with angular 1.3.6, on Safari browser the element started to blink when I navigate between views. It works fine on Chrome.
UDPDATE
I made a codepen version of my issue. The transition between tabs in Safari is jumpy (because of the hidden text), while in Chrome it works as expected.
JS:
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu', {
url: '/menu',
abstract: true,
templateUrl: "templates/menu.html"
})
.state('menu.tabs', {
url: '/tabs',
templateUrl: 'templates/tabs.html',
abstract: true
})
.state('menu.tabs.first', {
url: '/first',
views: {
'first-tab': {
templateUrl: 'templates/first.html',
}
},
})
.state('menu.tabs.second', {
url: '/second',
views: {
'second-tab': {
templateUrl: 'templates/second.html',
}
},
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('menu/tabs/first');
});
HTML:
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menus</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<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/menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-calm">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-royal">
<h1 class="title">MENU</h1>
</ion-header-bar>
<ion-content>
<ion-scroll style="height: 100%">
<a nav-clear menu-close ui-sref="menu.tabs.first" class="item item-icon-left">
<i class="icon ion-calculator"></i>
{{ Tabs }}
</a>
</ul>
</ion-scroll>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="First"
icon="ion-home"
ui-sref="menu.tabs.first">
<ion-nav-view name="first-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Debts"
icon="ion-compose"
ui-sref="menu.tabs.second">
<ion-nav-view name="second-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/first.html" type="text/ng-template">
<ion-view cache-view="false">
<div class="bar bar-subheader">
<h2 class="title calm">First</h2>
</div>
<ion-content class="has-header has-subheader" >
<div ng-show=false>
Hidden text 1
</div>
unhidden text 1
</ion-content>
</ion-view>
</script>
<script id="templates/second.html" type="text/ng-template">
<ion-view cache-view="false">
<div class="bar bar-subheader">
<h2 class="title calm">Second</h2>
</div>
<ion-content class="has-header has-subheader" >
<div ng-show=false>
Hidden text two
</div>
unhidden text two
</ion-content>
</ion-view>
</script>
</body>
</html>
Change your ng-show directive to ng-if="false" that will not show flickering appearance
first.html
<ion-content class="has-header has-subheader" >
<div ng-if="false">
Hidden text 1
</div>
unhidden text 1
</ion-content>
second.html
<ion-content class="has-header has-subheader" >
<div ng-if="false">
Hidden text two
</div>
unhidden text two
</ion-content>
Codepen
I had a similar issue with safari.
Instead of ngShow, I used ng-class="{hidden: myCondition}" with .hidden { display: none; } in CSS.
It seems to solve the issue.
When the initialization code, ng-show expression may detect many times, for example, from undefined to true or false.
I guess may be because of this reason, cause inside the ng-show element will render times.
You can check the code, try to give expressions to set an initial value, or add the animate to the ng-show.
Related
My sliding menu for the app does not do anything when you click on the menu button not sure what I am missing. It creates the button for the sliding menu and when you click it registers that it has been clicked but does not have the menu slide onto the screen. Sorry for this basic question I am new to ionic and angular JS. Not sure where I am going wrong in this because I am following ionic documentation on how to add their sliding menu into the app.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7" ng-controller="MapCtrl">
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleSideMenu">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">TekIT</h1>
</ion-header-bar>
<ion-content scroll="false">
<map on-create="mapCreated(map)"></map>
</ion-content>
<ion-footer-bar class="bar-stable">
<ion-tabs>
<ion-tab title="Mac" icon-off="ion-social-apple" icon-on="ion-social-apple" href="#/app/search">
<ion-nav-view name="tab-search"></ion-nav-view>
</ion-tab>
<ion-tab title="Windows" icon-off="ion-social-windows" icon-on="ion-social-windows" href="#/app/browse">
<ion-nav-view name="tab-browse"></ion-nav-view>
</ion-tab>
<ion-tab title="Mobile" icon-off="ion-iphone" icon-on="ion-iphone" href="#/app/playlists">
<ion-nav-view name="tab-playlists"></ion-nav-view>
</ion-tab>
<ion-tab title="Other" icon-off="ion-wifi" icon-on="ion-wifi"" href="#/app/playlists">
<ion-nav-view name="tab-playlists"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-footer-bar>
</body>
</html>
menu.html
<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>
<!-- TABS -->
<ion-tabs>
<ion-tab title="Search" icon-off="ion-search" icon-on="ion-search" href="#/app/search">
<ion-nav-view name="tab-search"></ion-nav-view>
</ion-tab>
<ion-tab title="Browse" icon-off="ion-ios-glasses" icon-on="ion-ios-glasses" href="#/app/browse">
<ion-nav-view name="tab-browse"></ion-nav-view>
</ion-tab>
<ion-tab title="Playlist" icon-off="ion-ipod" icon-on="ion-ipod" href="#/app/playlists">
<ion-nav-view name="tab-playlists"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<!-- Side Menu (left) -->
<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 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>
app.js
var app = angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controller.js
angular.module('starter.controllers', [])
//toggleSideMenu
.controller('toggleSideMenu', function($scope, $ionicLoading) {
$scope.alert("TEST!");
})
.controller('MapCtrl', function($scope, $ionicLoading) {
$scope.toggleSideMenu = function() {
alert("TEST!");
};
$scope.mapCreated = function(map) {
$scope.map = map;
};
$scope.centerOnMe = function () {
console.log("Centering");
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function (pos) {
console.log('Got pos', pos);
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function (error) {
alert('Unable to get location: ' + error.message);
});
};
})
CODE
http://codepen.io/hawkphil/pen/LEBNVB
I have two pages (link1 and link2) from the side menu. Each page has 2 tabs:
link1: tab 1.1 and tab 1.2
link2: tab 2.1 and tab 2.2
I am using ion-tabs for each page to contain the 2 tabs.
This is a very simple design: I want to click on the link1 or link2 to go to appropriate route. But for some reason, the state has changed correctly (see Console) but the actual html template did not get updated. Can you find out what's wrong and how to fix?
There seems to be some caching problem or something.
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-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-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</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-balanced">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close ui-sref="link1">
Link 1
</ion-item>
<ion-item nav-clear menu-close ui-sref="link2">
Link 2
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar-calm">
<h1 class="title">Right Menu</h1>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
<div class="list">
<a class="item item-avatar" href="#">
<img src="img/avatar1.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-side-menus>
<script id="link1.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 1.1</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 1.2</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
<script id="link2.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 2.1</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 2.2</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('link1', {
url: "/link1",
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
$urlRouterProvider.otherwise("/link1");
})
.controller('AppCtrl', ['$scope', '$rootScope', '$state', '$stateParams', function($scope, $rootScope, $state, $stateParams) {
$rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
console.log(toState);
});
}])
You are currently referring to the latest release which is 1.0.0-rc.0 which has bug while transition from one state to another it is not loading the view.
Further research found that, they had 14 beta releases from version 1.0.0-beta.1 to 1.0.0-beta.14 after they are now on version 1.0.0-rc.0 which is release candidate.
nav-view is working perfect till 1.0.0-beta.13 version but it stop working after 1.0.0-beta.14(which is last beta release),
I would suggest you to degrade your version to 1.0.0-beta.13, I know depending on beta version is not good thing but still until ionic release stable version you have to rely on it.
Working Codepen with 1.0.0-beta.13
Update:
Your problem is your view are getting cached because by default caching is enabled inside your ionic app.
Straight from Ionic Doc (Latest Release doc 1.0.0-beta.14)
By default, views are cached to improve performance. When a view is
navigated away from, its element is left in the DOM, and its scope is
disconnected from the $watch cycle. When navigating to a view that is
already cached, its scope is then reconnected, and the existing
element that was left in the DOM becomes the active view. This also
allows for the scroll position of previous views to be maintained.Maximum capacity of caching view is 10.
So by mentioning cache: false on $stateProvider states function or disabling cache of nav-view globally by doing $ionicConfigProvider.views.maxCache(0); inside angular config phase.
So in your case this is what exact problem, your 1st view is getting cache & showing it again & again
There are 3 ways to solve this issue
1. Disable cache globally
Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency.
$ionicConfigProvider.views.maxCache(0);
Codepen
2. Disable cache within state provider
$stateProvider
.state('link1', {
url: "/link1",
cache: false,
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
cache: false,
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
Codepen
3. Disable cache with an attribute
<ion-tab title="Home" icon="ion-home">
<ion-view cache-view="false" view-title="Home">
<!-- Ion content here -->
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view cache-view="false" view-title="Home">
<!-- Ion content here -->
</ion-view>
</ion-tab>
Codepen
I believe the updated approach would be great to implement. Thanks.
Github issue for the same issue link here
How I can add slide feature for nested tab bar in ionic framework if we have six tabs so I want just three tabs from six tabs show in on mobile screen and also can slide to left or right to another tab?
My HTML Template
<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="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></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" ui-sref="tabs.home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
Please check about tab
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view title="About">
<ui-view name="about-page"></ui-view>
</ion-view>
</script>
<script id="templates/about-page1.html" type="text/ng-template">
<ion-view title="Page 1">
<div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
<div class="tabs">
<a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
Page 1
</a>
<a class="tab-item" ui-sref="tabs.about.page2">
Page 2
</a>
<a class="tab-item" ui-sref="tabs.about.page3">
Page 3
</a>
<a class="tab-item" ui-sref="tabs.about.page4">
Page 4 </a>
<a class="tab-item" ui-sref="tabs.about.page5">
Page 5
</a>
<a class="tab-item" ui-sref="tabs.about.page6">
Page 6
</a>
</div>
</div>
<ion-content class="padding has-tabs-top">
<p> Page 1</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about-page2.html" type="text/ng-template">
<ion-view title="Page 2">
<div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
<div class="tabs">
<a class="tab-item" ui-sref="tabs.about.page1">
Page 1
</a>
<a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
Page 2
</a>
<a class="tab-item" ui-sref="tabs.about.page3">
Page 3
</a>
<a class="tab-item" ui-sref="tabs.about.page4">
Page 4 </a>
<a class="tab-item" ui-sref="tabs.about.page5">
Page 5
</a>
<a class="tab-item" ui-sref="tabs.about.page6">
Page 6
</a>
</div>
</div>
<ion-content class="padding has-tabs-top">
<p> Page 2</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
For full source code please check out my problem about nested tab bar on codepen
Note: I just show two nested tabs bar from six nested tabs bar on my example code in codepen.
You can use Ionic directives such as on-swipe, on-swipe-left, and on-swipe-right, to slide navigate between your tabs. Here is a example I made off your code pen. http://codepen.io/anon/pen/bdLwPz
Go to the about tab, then click and swipe left. BAM! Magic!
Read more about the gesture events here: http://ionicframework.com/docs/api/directive/onSwipe/
Here is the HTML:
<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="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
</head>
<body ng-controller="main">
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c"></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></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" ui-sref="tabs.home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios7-information" ui-sref="tabs.about.page1">
<ion-nav-view name="about-tab" ></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
Please check about tab
</ion-content>
</ion-view>
</script>
<script id="templates/about.html" type="text/ng-template">
<ion-view title="About">
<ui-view name="about-page"></ui-view>
</ion-view>
</script>
<script id="templates/about-page1.html" type="text/ng-template">
<ion-view title="Page 1">
<div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
<div class="tabs">
<a class="tab-item tab-item-active" ui-sref="tabs.about.page1">
Page 1
</a>
<a class="tab-item" ui-sref="tabs.about.page2">
Page 2
</a>
<a class="tab-item" ui-sref="tabs.about.page3">
Page 3
</a>
<a class="tab-item" ui-sref="tabs.about.page4">
Page 4 </a>
<a class="tab-item" ui-sref="tabs.about.page5">
Page 5
</a>
<a class="tab-item" ui-sref="tabs.about.page6">
Page 6
</a>
</div>
</div>
<ion-content on-swipe-left="onSwipeLeft()" class="padding has-tabs-top">
<p> Page 1</p>
</ion-content>
</ion-view>
</script>
<script id="templates/about-page2.html" type="text/ng-template">
<ion-view title="Page 2">
<div class="tabs-striped tabs-top tabs-background-light tabs-color-assertive">
<div class="tabs">
<a class="tab-item" ui-sref="tabs.about.page1">
Page 1
</a>
<a class="tab-item tab-item-active" ui-sref="tabs.about.page2">
Page 2
</a>
<a class="tab-item" ui-sref="tabs.about.page3">
Page 3
</a>
<a class="tab-item" ui-sref="tabs.about.page4">
Page 4 </a>
<a class="tab-item" ui-sref="tabs.about.page5">
Page 5
</a>
<a class="tab-item" ui-sref="tabs.about.page6">
Page 6
</a>
</div>
</div>
<ion-content class="padding has-tabs-top">
<p> Page 2</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
and the 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",
}
}
})
.state('tabs.about', {
url: "/about",
abstract: true,
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
.state('tabs.about.page1', {
url: "/page1",
views: {
'about-page': {
templateUrl: "templates/about-page1.html"
}
}
})
.state('tabs.about.page2', {
url: "/page2",
views: {
'about-page': {
templateUrl: "templates/about-page2.html"
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('main', function($scope, $state){
$scope.onSwipeLeft = function(){
$state.go('tabs.about.page2')
};
})
Please check the below link.
This is what you might be looking for.
https://github.com/JKnorr91/ion-slide-box-tabs
<ion-content scroll="false">
<ion-slide-box show-pager="false" ion-slide-tabs>
<ion-slide ion-slide-tab-label="test"><h1>Tab 1</h1></ion-slide>
<ion-slide ion-slide-tab-label="secondTest"><h1>Tab 2</h1></ion-slide>
<ion-slide ion-slide-tab-label="<b>boldTest</b>"><h1>Tab 3</h1></ion-slide>
</ion-slide-box>
Add the slidingTabsDirective.js to your Ionic Project and include it in your index.html.
Example: If you put the slidingTabsDirective.js to your js folder, you should paste the following line into your index.html anywhere after the ionic inclusion.
<script src="js/slidingTabsDirective.js"></script>
Add the SCSS or the CSS code from slidingTabs.scss or slidingTabs.css to your project Styles.
All required files and example are available on the githup repository from where I got it.
So, I have a code pen link here: http://codepen.io/anon/pen/oXwZmr
In that, they combined all the templates in index.html (tabs.html, mainContainer.html, entry.html, ...) and all controllers of template pages in js file(MainController, TabsPageController, ...).
I wanted to keep all things separate, so i did like index.html, mainController.html mainController.js, tabs.html, tabs.js, app.js.
The codepen works perfectly. But I am getting problem. My Content is going behind tabs.
index.html
<html ng-app="DroidRestClient">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Droid Rest Client</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>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionicons.css" rel="stylesheet" type="text/css"/>
<!--ionic/angularjs js-->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="templates/mainContainer/mainContainer.js" type="text/javascript"></script>
<script src="templates/tabs/tabs.js" type="text/javascript"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view>
</ion-nav-view>
</body>
</html>
app.js
angular.module('DroidRestClient', ['ionic', 'DroidRestClient.mainController', 'DroidRestClient.tabsPageController'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url : '/main',
templateUrl : 'templates/mainContainer/mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs/tabs.html',
controller : 'TabsPageController'
}
}
});
$urlRouterProvider.otherwise('/main/tabs');
}]);
mainContainer.html
<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">Settings</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
mainContainer
angular.module('DroidRestClient.mainController', ['ionic'])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
};
}]);
tabs.html
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Request" icon-off="ion-ios-cloud-upload-outline" icon-on="ion-ios-cloud-upload">
<ion-content has-header="true" padding="true">
<form ng-submit="doLogin()">
<div class="list">
<div class="item item-divider item-button-right">
Url
</div>
<label class="item item-input">
<input type="text" placeholder="enter url">
</label>
<div class="item item-divider item-button-right">
Method
</div>
<label class="item item-input">
<div class="input-label">
Method
</div>
<select>
<option selected>GET</option>
<option>POST</option>
<option>PUT</option>
<option>DELETE</option>
</select>
</label>
<div class="item item-divider item-button-right">
Parameters
<a class="button button-icon icon ion-ios-plus-empty"></a>
<button class="button button-positive">
<i class="icon ion-ios-plus-empty"></i>
</button>
</div>
<div class="list list-inset">
<div class="item">
No parameters
</div>
</div>
<div class="item item-divider item-button-right">
Headers
<a class="button button-icon icon ion-ios-plus-empty"></a>
<button class="button button-positive">
<i class="icon ion-ios-plus-empty"></i>
</button>
</div>
<div class="list list-inset">
<div class="item">
No headers
</div>
</div>
<div class="item item-divider item-button-right">
Body
</div>
<label class="item item-input">
<textarea placeholder="enter body"></textarea>
</label>
</div>
</form>
</ion-content>
</ion-tab>
<ion-tab title="Response" icon-off="ion-ios-cloud-download-outline" icon-on="ion-ios-cloud-download">
<ion-content has-header="true" padding="true">
<h2>Response</h2>
</ion-content>
</ion-tab>
</ion-tabs>
tabs.js
angular.module('DroidRestClient.tabsPageController', ['ionic'])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}]);
Give class="has-header" to ion-content.
<ion-content class="has-header">
</ion-content>
And you need to initialise your angular app - See javascript on my example. Note ng-controller and ng-app.
Add has-header="true" in tabs.html
in example; <ion-view title="{{navTitle}}" has-header="true" left-buttons="leftButtons">
I was also facing the same issue and it worked for me.
I'm trying to learn ionic framework, and I have been reading routing side of things and this is were I am getting a little stuck.
I had my app working, but now I want to add more views. So, I have started by putting my home view in a state called 'home' (sorry if i am not using the correct terminology).
Ok here is my html:
<!DOCTYPE html>
<html ng-app="ionic.example">
<head>
<meta charset="utf-8">
<title>Venues</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</div>
<h1 class="title">Venues</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
<ion-view nng-controller="MyCtrl" title="home">
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="item in items">
<a href="#/venue/{{ item[0].id }}">
<div class="list card">
<div class="item item-avatar">
<img src="{{ item[0].profile_pic }}">
<h2 class="item-venue-title">{{ item[0].name }}</h2>
<p class="item-location">UK</p>
</div>
<div class="item item-body">
<img class="full-image" src="{{ item[0].heder_img }}">
</div>
</a>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</ion-item>
</ion-list>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
</ion-content>
</ion-view>
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
<a class="tab-item">
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>
<i class="icon ion-leaf"></i>
</a>
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
</nav>
</ion-pane>
</body>
</html>
I have added the following to the .js file
var example=angular.module('ionic.example', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'MyCtrl'
})
;
$urlRouterProvider.otherwise('/home');
});
What I don't understand is how do you say this is the 'first' view so to speak.
Any advice would be appreciated.
the section
$urlRouterProvider.otherwise('/home');
would define the index route so in this case /home would be the first page.
The content of home.html is rendered inside the ion-nav-view, see below
<body ng-app="quote">
<!-- where the initial view template will be rendered -->
<div ng-controller="AppCtrl">
<ion-nav-view></ion-nav-view>
</div>
</body>
and the content for home.html goes inside the ion-content tag, see below
<ion-view title="your title">
<ion-content>
your content here
</ion-content>
</ion-view>
I done it by
<script type="text/ng-template" id="home.html">
<ion-view nng-controller="MyCtrl" title="home">
<!--content here--!>
</ion-view>
</script>
and in the js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MyCtrl'
})
;
$urlRouterProvider.otherwise('/');
});