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('/');
});
Related
I'm trying to display main.html template via UI routing, but its not working for some reason. Can someone please point out the mistake in my code. Thank you.
appModule
"use strict";
angular.module("fleetOperate", ["ui.router", "mainModule"]);
UI Routing
"use strict";
angular.module('fleetOperate').config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});
mainModule
"use strict";
angular.module("mainModule", []);
main.HTML
<div class="icon-bar" ui-view="main">
<a ui-sref="" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Fleet</label>
</a>
<a ui-sref="" class="item">
<i class="fa fa-users" style="font-size:48px;"></i>
<label>Drivers</label>
</a>
<a href="#" class="item">
<i class="fa fa-calendar" style="font-size:48px;"></i>
<label>Planner</label>
</a>
<a href="#" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Trailors</label>
</a>
<a href="#" class="item">
<i class="fa fa-files-o" style="font-size:48px;"></i>
<label>Pod</label>
</a>
<a href="#" class="item">
<i class="fa fa-cog" style="font-size:48px;"></i>
<label>Settings</label>
</a>
<a href="#" class="item">
<i class="fa fa-square-o" style="font-size:48px;"></i>
<label>Control Center</label>
</a>
<a href="#" class="item">
<i class="fa fa-phone" style="font-size:48px;"></i>
<label>Communication</label>
</a>
<a href="#" class="item">
<i class="fa fa-user" style="font-size:48px;"></i>
<label>Customer Profile</label>
</a>
</div>
Index.HTML
<!DOCTYPE html>
<html ng-app="fleetOperate">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Truck Trackers</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="app/app.css" rel="stylesheet" />
<link href="app/main/main.css" rel="stylesheet" />
<script src="scripts/angular.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="app/main/mainModule.js"></script>
<script src="app/appModule.js"></script>
<script src="app/appUI_Routing.js"></script>
</head>
<body class="container-fluid">
<header class="js-title-bar">
<div class="js-logo-area">
<img class="js-icon" ng-src="http://www.cam-trucks.com/images/2.jpg"/>
<div class="js-title-area">
<p class="js-logo-title"> <strong>Truck Tracker's</strong></p>
<p class="js-logo-subtitle">Where ever you GO, we FIND you !</p>
</div>
</div>
</header>
<div ui-view></div>
</body>
</html>
Update your UI Router:
angular.module('fleetOperate').config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("main");
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});
I have a scrolling list in my mobile app which I build using ionic 1.0.1. The list is quite choppy when scrolling. The text blurs a little when scrolling. I checked Facebook's app on my phone and it scrolls very nicely, no chopping and blur. I have created a code pen and was wondering if there is anything I can do to improve the performance of this:
http://codepen.io/anon/pen/GJdpRz
HTML:
<html ng-app="mobileApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic List Bug</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-content>
<ion-item collection-repeat="item in items">
<div class="list card">
<div class="item item-avatar">
<img src="mcfly.jpg">
<h2>{{item}}</h2>
<p>{{item}}</p>
</div>
<div class="item item-body">
<img class="full-image" src="delorean.jpg">
<p>
{{item}}
</p>
<p>
1 Like
5 Comments
</p>
</div>
<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-content>
</body>
</html>
JS:
angular.module('mobileApp', ['ionic'])
.config(function($ionicConfigProvider) {
if (!ionic.Platform.isIOS()) $ionicConfigProvider.scrolling.jsScrolling(false);
})
.controller('MainCtrl', ['$scope', function($scope) {
$scope.items = [];
for (i = 0; i < 10; i++) {
$scope.items.push("Item " + i);
}
}]);
There isnt much we can do right now, but for now you can put this is your .config , this will allow native scrolling. I did see a performance improvement in scrolling.
.config(function($ionicConfigProvider) {
if(!ionic.Platform.isIOS())$ionicConfigProvider.scrolling.jsScrolling(false);
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 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.