I have a popover template like:
<ion-popover-view class="fit">
<ion-content scroll="false">
<ion-list>
<ion-item ng-click="popoverGotoView(foo, {id: 1})">
Option 1
</ion-item>
<ion-item ng-click="popoverGotoView(foo, {id: 2})">
Option 2
</ion-item>
</ion-list>
</ion-content>
</ion-popover-view>
And in controller I have
$scope.popoverGotoView = function(path, arg) {
$scope.popover.hide();
$state.go(path, args);
}
Where $scope.popover is get based on ionic docs. Popover shows, on click it goes to another view but it doesn't hide. I tried to debug and it goes to hide method, but inside, ionic is changing popup classes without effect in DOM. Clicking outside popover it hides properly.
What I'm doing wrong?
Here is a code snippet. Where is the problem?
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",
controller: 'HomeCtrl'
}
}
})
.state('tabs.map', {
url: "/map",
views: {
'map-tab': {
templateUrl: "templates/map.html",
controller: 'MapCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.run(function($rootScope) {
})
.controller('HomeCtrl', function($scope, $state, $ionicPopover) {
console.log('HomeCtrl');
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
$scope.popoverGotoView = function(path, arg) {
$scope.popover.hide();
$state.go(path, arg);
}
})
.controller('MapCtrl', function($scope, $state, $ionicPopover) {
console.log('MapCtrl');
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
$scope.popoverGotoView = function(path, arg) {
$scope.popover.hide();
$state.go(path, arg);
}
});
<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/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/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="Map" icon="ion-ios-world" ui-sref="tabs.map">
<ion-nav-view name="map-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<ion-content class="padding">
Home view
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/map">Go to Map</a>
</p>
</ion-content>
</ion-view>
</script>
<script id="templates/map.html" type="text/ng-template">
<ion-view title="">
<ion-nav-buttons side="left">
<input id="places" class="controls" type="text" autocomplete placeholder="Enter a location" />
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<ion-content>
Map view
</ion-content>
</ion-view>
</script>
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view class="fit">
<ion-content scroll="false">
<ion-list>
<ion-item ng-click="popoverGotoView('tabs.map', {id: 1})">
Option 1 Map
</ion-item>
<ion-item ng-click="popoverGotoView('tabs.home', {id: 2})">
Option 2 Home
</ion-item>
</ion-list>
</ion-content>
</ion-popover-view>
</script>
</body>
</html>
Related
I can't navigate to it another template
its shows me error above
and i also tried ui-sref to go signup templete
Here My Starter app Structure--
I have templates of
Login.html
Signup.html
dash.html
Here my index page
<body ng-app="starter">
<ion-tab title="Home" >
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-tab>
<ion-nav-bar >
<ion-nav-back-button class="button-icon ion-ios7-arrow-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view > </ion-nav-view> -->
<ion-header-bar class="bar-stable">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
and my app.js is
.state('login', {
url: '/',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('Fourm' ,{
url : '/SignUp',
templateUrl: 'templates/SignUp.html',
controller :'SignCtrl'
})
$urlRouterProvider.otherwise('/');
and my Controller.js
.controller('LoginCtrl', function($scope, LoginService, $ionicPopup, $state) {
$scope.data = {};
$scope.Login = (function() {
LoginService.loginUser($scope.data.username, $scope.data.password).success(function(data) {
//var Popup = $ionicPopup.alert({title : 'Login success'})
alert("Welcome User")
$state.go('tab');
}).error(function(data) {
var alertPopup = $ionicPopup.alert({
title: 'Login failed!',
template: 'Please check your credentials!'
});
});
})
)
.controller('SignCtrl' , function($scope, $ionicPopup, $state) {
console.log("in cotrl")
$scope.SignUp = (function()
{
alert("user")
$state.go('Fourm');
});
})
and my LoginTemplate
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset" >
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="Login()">Login</button>
<<button class="button button-block button-assertive" ng-click="SignUp()" >SignUp</button>
</ion-content>
</ion-view>
1) Not a good way to put ion-tab in index.html unless you want tab in all page in your app.
2) ion-tab define single tab which should be in ion-tabs container.
3) In angular ui router for tab container we have to define route with abstarct true.
For mor information you can see here
I had created simple codepen. Which will help you.
So in templates/index.html
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
templates/login.html
<ion-view view-title="Login" name="login-view">
<ion-content class="padding">
<div class="list list-inset" >
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="Login()">Login</button>
</ion-content>
</ion-view>
templates/tabs.html
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Login" icon="ion-home" ui-sref="tabs.login">
<ion-nav-view name="login-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Signup" icon="ion-ios-information" ui-sref="tabs.signup">
<ion-nav-view name="signup-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
//instead of ui-sref we can use ng-click => $state.go('tabs.signup')
too.
and in app.js
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.login', {
url: "/login",
views: {
'login-tab': {
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
}
}
})
.state('tabs.signup', {
url: "/signup",
views: {
'signup-tab': {
templateUrl: "templates/signup.html"
}
}
})
$urlRouterProvider.otherwise("/tab/login");
I am trying to create an app with Sidemenu and Tabs. Please see my code in the following link.
http://codepen.io/ccrash/pen/WxbeOR
My question is, after I launched the app, I can click both the tabs, and the content changes accordingly. When I clicked the profile within the sidemenu, the profile page is displayed. But now, when I try to click either of the tabs again, it seems that the profile page is either displaying on-top of the tab contents or not even functioning. Can anyone help ?
HTML Code
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/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>
<!-- <ion-nav-bar class="bar bar-header bar-positive"> -->
<!-- <ion-nav-bar class="bar-stable"> -->
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top">
<ion-tab title="Latest" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/latest">
<ion-nav-view name="tab-latest"></ion-nav-view>
</ion-tab>
<ion-tab title="Market" icon-off="ion-ios-cart-outline" icon-on="ion-ios-cart" href="#/app/market">
<ion-nav-view name="tab-market"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-header-bar>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item menu-close href="#/app/profile">
<i class="icon ion-person" style="font-size:15px;margin-right:10px;"></i> My Profile
</ion-item>
<ion-item menu-close href="#/app/logout">
<i class="icon ion-log-out" style="font-size:15px;margin-right:10px;"></i> Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/latest.html" type="text/ng-template">
<ion-view view-title="Latest News">
<ion-content>
<div class="list card">
<div class="item item-body">
Latest News
</div>
</ion-content>
</ion-view>
</script>
<script id="templates/market.html" type="text/ng-template">
<ion-view view-title="Market">
<ion-content>
Market
</ion-content>
</ion-view>
</script>
<script id="templates/profile.html" type="text/ng-template">
<ion-view view-title="Profile">
<ion-content>
My Profile
</ion-content>
</ion-view>
</script>
</body>
</html>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.latest', {
url: "/latest",
views: {
'tab-latest': {
templateUrl: "templates/latest.html"
}
}
})
.state('app.market', {
url: "/market",
views: {
'tab-market': {
templateUrl: "templates/market.html"
}
}
})
.state('app.profile', {
url: '/profile',
views: {
'menuContent': {
templateUrl: 'templates/profile.html'
}
}
})
$urlRouterProvider.otherwise("/app/latest");
})
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {});
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) {
});
I have a footer bar I want to add to most of my templates, so I added it in the index.html file.
<ion-nav-view ></ion-nav-view>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
The problem is that in some templates I want to hide this footer, so I tried inside the template to put an empty <ion-footer-bar></ion-footer-bar> after ion-content, but still the footer is showing.
How can I hide it or override it in my template ?
Thanks
Here below is an example in which the second view (tab) has no ion-footer-bar.
I've used $stateChangeStart event to change the property $scope.showFooter to which is bound the visibility of footer (via ng-if).
The state change handler is in a 'mainCtrl' (and also showFooter property) which works as parent controller of all other "view" controllers.
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",
controller: 'HomeCtrl'
}
}
})
.state('tabs.map', {
url: "/map",
views: {
'map-tab': {
templateUrl: "templates/map.html",
controller: 'MapCtrl'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('mainCtrl', function($scope, $state, $rootScope) {
console.log('mainCtrl');
$scope.showFooter = true;
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
console.log('>'+toState.name);
if (toState.name=="tabs.home") $scope.showFooter = false;
else $scope.showFooter = true;
});
})
.controller('HomeCtrl', function($scope, $state, $ionicPopover) {
console.log('HomeCtrl');
})
.controller('MapCtrl', function($scope, $state, $ionicPopover) {
console.log('MapCtrl');
});
<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/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="mainCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<ion-footer-bar align-title="left" class="bar-assertive" ng-if="showFooter">
<div class="buttons">
<button class="button">AAA</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
</ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-top 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="Map" icon="ion-ios-world" ui-sref="tabs.map">
<ion-nav-view name="map-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Home" cache-view="false" >
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<ion-content class="padding" ng-class="{'has-footer': showFooter}">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/map">Go to Map</a>
</p>
<pre>showFooter = {{showFooter}}</pre>
</ion-content>
</ion-view>
</script>
<script id="templates/map.html" type="text/ng-template">
<ion-view title="" cache-view="false" >
<ion-nav-buttons side="left">
<input id="places" class="controls" type="text" autocomplete placeholder="Enter a location" />
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</ion-nav-buttons>
<ion-content ng-class="{'has-footer': showFooter}">
<div id="map" data-tap-disabled="true" style="width: 500px;height: 500px"></div>
<pre>showFooter = {{showFooter}}</pre>
</ion-content>
</ion-view>
</script>
</body>
</html>
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>