I have a tricky problem (or at least I think its tricky). I have set up tabs in ionic by having a menu view with an associated abstract route.
menu.html:
<ion-nav-bar class="bar-custom">
<!-- Add Back Button Directive -->
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent">
<ion-tabs class="tabs-stable tabs-icon-top">
<ion-tab title="Dashboard" icon="ion-home" ui-sref="app.headlines">
<ion-nav-view name="dashboard"></ion-nav-view>
</ion-tab>
<ion-tab title="Portfolio" icon="ion-arrow-graph-up-right" ui-sref="app.stocks">
<ion-nav-view name="portfolio"></ion-nav-view>
</ion-tab>
<ion-tab title="Alerts" icon="ion-ios-bolt" ui-sref="app.alerts">
<ion-nav-view name="alerts"></ion-nav-view>
</ion-tab>
<ion-tab title="Saved" icon="ion-bookmark" ui-sref="app.saved-posts">
<ion-nav-view name="saved"></ion-nav-view>
</ion-tab>
<ion-tab title="Accounts" icon="ion-gear-a" ui-sref="app.accounts">
<ion-nav-view name="accounts"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-nav-view>
piece of routes.js:
angular.module('starter')
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'LoginController',
cache: false
})
The tabs work beautifully and just as I would expect. The next step is to change what those tab options are depending on what view I currently am on. So for example instead of Dashboard, Portfolio, Alerts, Saved, Accounts, that I have set as a default, I want options that will lead to foo, bar and foo2. What is the best approach to accomplish this? I have read a little on nested tabs but I don't think that is the way to go (seems to be for having tabs on top of tabs or something).
Related
I am building an app using the Ionic framework tabbed view. Ionic already gives me tabs at the bottom but I also want two buttons at the top that changes the view. I cannot seem to get this to work. Specifically the one at the top right (see screenshot). Right now, when you click on it; it does nothing.
This is the tab interface they give me:
<ion-view id="page1">
<ion-tabs class="tabs-stable tabs-icon-bottom" id="tabsController-tabs1">
<ion-tab icon="ion-ios-photos" href="#/page1/index" id="tabsController-tab1">
<ion-nav-view name="tab1"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab2">
<ion-nav-view name="tab2"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
In my routes.js I have this state for my new button:
.state('tabsController.myMoments', {
url: '/myMoments',
cache:false,
views: {
'tab4': {
templateUrl: 'myMoments/myMoments.html',
controller: 'MyMomentsController',
controllerAs: 'vm'
}
}
})
I have also, sort of 'hacked' the button. Its not actually a tabbed state, its just a button with a ng-click that sends you to the desired state. I put this code in my index.html:
<ion-nav-buttons side="right">
<div class="ion-person" ng-click="indexController.redirectMyMoments()"></div>
</ion-nav-buttons>
I don't understand where I am supposed to put 'tab4'. My assumption is that it goes with these rest of my tabs but no matter where I put it, it seems to mess up my other tabs and I don't want to make another ion-tab in there because I don't want it to be at the bottom.
I have also noticed that if I change the view name to 'tab3' it actually works so it is changing the state correctly, however, it highlights the third tab when you click on the top right view which is also bad.
Thanks for any help.
EDIT:
Plunker of my problem:
https://plnkr.co/edit/PTS9Jt?p=preview
Your last tab name is suppose to be tab4 instead of tab2 in your tab interface.
<ion-view id="page1">
<ion-tab icon="" href="#/page1/index" id="tabsController-tab2">
<ion-nav-view name="tab2"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-camera" ng-if="timer === '0m'" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab title="{{timer}}" ng-if="timer !== '0m'" disabled="true" ng-if="true" ng-click="indexController.camera()">
<ion-nav-view name="tab3"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-android-list" href="#/page1/bestMoments" id="tabsController-tab4">
<ion-nav-view name="tab4"></ion-nav-view>
</ion-tab>
Replace your code with this.
--------------------------UPDATE------------------------
Now, for Tab-3, You cannot have multiple tabs with same name. So what you can do in it is you can create a nested view in it. As in, you can have 2 views in it with different names.. one timer and one camera(OR ANYTHING ELSE YOU WANT). Here is the reference of multiple views in one tab. ionic multiple view states for one tab
Now each of your tab will have a unique name and a unique-associated id for them. So you can style it as you want it to look like.
I am using Ionic framework and want to create tabs without icons. I know I can achieve this with the CSS component tabs (http://ionicframework.com/docs/components/#tabs). Just wanted to check if it's possible with ion-tab directive also (http://ionicframework.com/docs/api/directive/ionTabs/). I tried with ion-tab directive by not providing the icon attribute. It creates the tab, but the placeholder of the icon is still there and the tabs don't look good with that empty space in place of the icon.
Try this.
<ion-content scroll="false">
<ion-tabs class="tabs-striped tabs-top">
<ion-tab title="Home" href="#">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="Gallery" href="#">
<ion-nav-view name="gallery"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
I have an Ionic Framework app that has 4 tabs. But I only want three tabs visible at any one time.
The first two tabs are always visible (call them Tab1 and Tab2). But the third tab needs to be one OR the other, but not both, between two different pieces of content (call them Tab 3a and Tab 3b). So you will have Tab1,Tab2,Tab3a or Tab1,Tab2,Tab3b.
For HTML, I came up with this:
<ion-tab title="Tab 1" href="#/tab/1" >
<ion-nav-view name="tab-timeline"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 2" href="#/tab/2" >
<ion-nav-view name="tab-2"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3a" href="#/tab/3a" class="{{enableTab3a()}}">
<ion-nav-view name="tab-3a"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3b" href="#/tab/3b" class="{{enableTab3b()}}">
<ion-nav-view name="tab-3b"></ion-nav-view>
</ion-tab>
Now I need a directive that will toggle the classes on Tab3a and Tab3b with "ng-show" and "ng-hide" based on a condition.
The condition that determines which tab to show is stored in a localStorage variable and accessed in a controller like this:
if(window,localStorage["tab3"] == 'a' {
$scope.tab3a = true;
$scope.tab3b = false;
} else {
$scope.tab3a = false;
$scope.tab3b = true;
}
How do I build a directive that triggers the classes based on the condition, and shows only the correct tab (Tab3a or Tab3b)?
Additional Info:
I have 5 controllers. Each tab has a controller, and tabs.html has a controller. This is why I think a directive is best suited for this, if the directive can react to changes in the localStorage variable
Use the ion-tab attribute hidden
<ion-tab title="Tab 3a" href="#/tab/3a" hidden="{{tab3a}}">
<ion-nav-view name="tab-3a"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab 3b" href="#/tab/3b" hidden="{{!tab3a}}">
<ion-nav-view name="tab-3b"></ion-nav-view>
</ion-tab>
and in your controller
$scope.tab3a = window.localStorage["tab3"] == 'a';
I am trying to do navigation to tab list after selecting some items from the list.
when I am trying to run my code I am getting Cannot GET /tab/1337
my selection from the list looks like:
<div class="list">
<a ng-repeat="item in items"
href="/tab/{{item.queId}}"
class="item item-thumbnail-left">
My app.js looks like
.state('tabs.details', {
url: "/details/:itemqueId",
views: {
'details-tab': {
templateUrl: "templates/details.html",
controller: 'FriendDetailCtrl'
}
}
})
.state('tabs', {
url: "/tab/:itemqueId",
abstract: true,
templateUrl: "templates/tabs.html"
});
my tabs.html looks like:
<ion-view>
<ion-tabs class="tabs-icon-top">
<!-- Pets Tab -->
<ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Adopt Tab -->
<ion-tab title="details" icon="icon ion-heart" href="#/tab/details">
<ion-nav-view name="tab-details"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
don't know what can be the issue, but hope you will help!
Thanks!
Remove the line saying abstract: true in the tabs state definition - abstract states can not get activated. See ui-router docs.
Update:
What do you actually expect to happen when hitting /tab/1337?
Available Tabs
First of all, taking a look at the current state config, you have only a single valid route, since the tab state is abstract:
/tab/:itemqueId/details/:itemqueId
See how tab.details it will append it's url the one of tab, since it's a nested state of tabs. Therefor /tab/1337 is not a valid route.
What you might be looking for is /tab/:itemqueId/details - therefor change your url for tab.details to url: "/details"
Linking
Instead of using the href attribute, you should always prefer using the ng-href directive when interpolating variables from the angular scope.
In this case I'd even suggest to use ui-sref directive from ui-router. This way you can create urls with state definition and also check if your definition is valid.
<a ui-sref="tab.details({ itemqueId: item.queId })">
In the tabs.html your links should look like this to point to an sibling state - given that tabs.dash is a valid state similar to tabs.details:
<!-- Pets Tab -->
<ion-tab title="Dashboard" icon="icon ion-home" ui-sref="^.dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Adopt Tab -->
<ion-tab title="details" icon="icon ion-heart" href="^.details">
<ion-nav-view name="tab-details"></ion-nav-view>
</ion-tab>
Long title but here is a better explanation.
I have a template html file called "Login". I define a route in app.js like so
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'createAccountCtrl'
})
By using ui-sref="login" I can link to this template from anywhere which is perfect for my needs.
However the main app uses an abstract route "tab" to load the tabs template which contains the main navigation.
.state('tab.about', {
url: '/about',
views: {
'about-tab': {
templateUrl: 'templates/about.html',
controller: 'aboutCtrl'
}
}
})
<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default">
<!-- Home Tab -->
<ion-tab title="Home" icon="icon ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<!-- Products Tab -->
<ion-tab title="Earn Points" icon="icon ion-ios7-plus-outline" href="#/tab/retail-store">
<ion-nav-view name="retail-store-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
My problem is this. I want the Login page to have the main app's navigation like every other page has. That way a user who makes it to the login page, if they don't to login can still navigate off to the home or about page. But, I do not want a navigation tab/icon of its own to show.
Is is possible to just add the tabs html directly to the login.html template file or possibly hide the login icon/tab. I am open to suggestions and help. Thank you!
The tabs are meant to have their own tab icon. So you can't put the login page inside the tabs abstract view without creating a tab icon for it.
Instead of putting the login page under the tab abstract view, you should just put a separate tabbed navigation for the login page.
Load the following view into your index page.
<ion-view title="'Login'">
<ion-content has-header="true" has-footer="true" padding="true">
Login page content goes here
</ion-content>
<div class="tabs tabs-icon-left">
<a class="tab-item" href="#/tab/home">
Home
</a>
<a class="tab-item" href="#/tab/about">
About
</a>
</div>
</ion-view>