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.
Related
I'm trying to use ionic material theme in a app trying to build using ionic framework. I installed ionic-material and robotidraft using bower. added the scripts also.. but in next step they asked to inject these into the app..
how to Inject Ionic & Ionic Material into Ionic App?
where should I add this?
var app = angular.module('YOUR_APP_NAME', ['ionic', 'ionic-material']);
You can use ionic material with ionic as below ,
angular.module('ionicApp', ['ionic', 'ionic-material'])
Make sure you have refered the libraries
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script>
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet">
DEMO
/*global angular*/
angular.module('ionicApp', ['ionic', 'ionic-material'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: '/event',
abstract: true,
templateUrl: 'templates/event-menu.html'
})
.state('eventmenu.home', {
url: '/home',
views: {
'menuContent' :{
templateUrl: 'templates/home.html'
}
}
})
.state('eventmenu.checkin', {
url: '/check-in',
views: {
'menuContent' :{
templateUrl: 'templates/check-in.html',
controller: 'CheckinCtrl'
}
}
})
.state('eventmenu.attendees', {
url: '/attendees',
views: {
'menuContent' :{
templateUrl: 'templates/attendees.html',
controller: 'AttendeesCtrl'
}
}
});
$urlRouterProvider.otherwise('/event/home');
})
.controller('MainCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $ionicSideMenuDelegate, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
$scope.attendees = [
{ firstname: 'Nicolas', lastname: 'Cage' },
{ firstname: 'Jean-Claude', lastname: 'Van Damme' },
{ firstname: 'Keanu', lastname: 'Reeves' },
{ firstname: 'Steven', lastname: 'Seagal' }
];
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('CheckinCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
$scope.showForm = true;
$scope.shirtSizes = [
{ text: 'Large', value: 'L' },
{ text: 'Medium', value: 'M' },
{ text: 'Small', value: 'S' }
];
$scope.attendee = {};
$scope.submit = function() {
if(!$scope.attendee.firstname) {
/*jshint ignore:start*/
alert('Info required');
/*jshint ignore:end*/
return;
}
$scope.showForm = false;
$scope.attendees.push($scope.attendee);
};
})
.controller('AttendeesCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
$scope.activity = [];
$scope.arrivedChange = function(attendee) {
var msg = attendee.firstname + ' ' + attendee.lastname;
msg += (!attendee.arrived ? ' has arrived, ' : ' just left, ');
msg += new Date().getMilliseconds();
$scope.activity.push(msg);
if($scope.activity.length > 3) {
$scope.activity.splice(0, 1);
}
};
});
/*endglobal angular*/
<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>INSERT YOUR PROBLEM NAME HERE</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script>
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<ion-nav-view></ion-nav-view>
<script id="templates/event-menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list animate-rip">
<!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
<a href="#/event/check-in" class="item" menu-close>Check-in</a>
<a href="#/event/attendees" class="item" menu-close>Attendees</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Welcome" ng-cont>
<ion-content class="padding">
<p>Swipe to the right to reveal the left menu.</p>
<p>(On desktop click and drag from left to right)</p>
</ion-content>
</ion-view>
</script>
<script id="templates/check-in.html" type="text/ng-template">
<ion-view view-title="Event Check-in">
<ion-content>
<form class="list animate-ripple" ng-show="showForm">
<div class="item item-divider">
Attendee Info
</div>
<label class="item item-input">
<input type="text" placeholder="First Name" ng-model="attendee.firstname">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name" ng-model="attendee.lastname">
</label>
<div class="item item-divider">
Shirt Size
</div>
<ion-radio ng-repeat="shirtSize in shirtSizes"
ng-value="shirtSize.value"
ng-model="attendee.shirtSize">
{{ shirtSize.text }}
</ion-radio>
<div class="item item-divider">
Lunch
</div>
<ion-toggle ng-model="attendee.vegetarian">
Vegetarian
</ion-toggle>
<div class="padding">
<button class="button button-block" ng-click="submit()">Checkin</button>
</div>
</form>
<div ng-hide="showForm">
<pre ng-bind="attendee | json"></pre>
View attendees
</div>
</ion-content>
</ion-view>
</script>
<script id="templates/attendees.html" type="text/ng-template">
<ion-view view-title="Event Attendees">
<ion-content>
<div class="list animate-rip">
<ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
ng-model="attendee.arrived"
ng-change="arrivedChange(attendee)">
{{ attendee.firstname }}
{{ attendee.lastname }}
</ion-toggle>
<div class="item item-divider">
Activity
</div>
<div class="item" ng-repeat="msg in activity">
{{ msg }}
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
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.
I've got the following code
Check on codepen
<html ng-app="optik">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menu query replication</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<body ng-controller='ContentController'>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar bar-header bar-positive">
<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
<div class="h1 title"> Ionic Optik! </div>
<button class="button button-icon icon ion-more" ng-click="console.log('clickie')"></button>
</ion-header-bar>
<ion-content has-header="true">
<input type="text" placeholder="Nombre" ng-model="query.test" />
<h3> Hola {{query.test}}</h3>
<!--
<ion-list>
<ion-item ng-repeat="cliente in clientes">
{{cliente.nombre}}
</ion-item>
</ion-list>
-->
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left" expose-aside-when="large">
<ion-header-bar class="bar bar-header bar-stable">
<div class="h2 title"> Busqueda </div>
</ion-header-bar>
<ion-content has-header="true">
<ul class="list">
<label class="item item-input">
<input type="text" placeholder="Nombre" ng-model="query.nombre" />
</label>
<label class="item item-input">
<input type="text" placeholder="Ciudad" />
</label>
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="meses" min="0" max="12" />
<i class="icon ion-volume-high"></i>
</div>
</ul>
<h3>{{query.nombre}}<h3>
<h3>Hola {{query.test}}</h3>
<h3>{{texto}}</h3>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
Js file
angular.module('optik', ['ionic']);
angular
.module('optik')
.controller('ContentController', ContentController);
ContentController.$inject = ['$scope', '$ionicSideMenuDelegate'];
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
It includes a text input inside side view with ng-model='query.nombre'. It updates a {{query.nombre }} inside the sidenav but not one on the Right pane. Any idea what the issue might be?
Your problem is that $scope.query is undefined into your controller.
Therefore $scope.query.test is not working.
Add this the your controller definition : $scope.query={}
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.texto = "Hola mundo!";
$scope.query={}
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
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('/');
});
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.