SDEK
May 7, 2015, 3:02pm
1
Hey there,
here’s the thing.
I’ve got a tab template with 3 tabs. One of the tab is calling a ActionSheet.
within the ActionSheet I got 3 links which I want to navigate to other views via $state.go
I get only 1 link to work, because I can only put 1 of the views inside the tabs ion-nav-view.
Inside my tabs.html:
<ion-tab title="Tipps" icon-off="ion-ios-information-outline" icon-on="ion-ios-information" ng-click="showTips()" >
<ion-nav-view name="tips01"></ion-nav-view>
</ion-tab>
controller js:
.run(function($ionicPlatform,$rootScope,$ionicActionSheet,$state) {
$rootScope.showTips = function() {
var hideSheet = $ionicActionSheet.show({
buttons: [
{ text: '<div class="tips-icons center"><img src="img/tips/tips01.svg"/></div> Allgemein' },
{ text: '<div class="tips-icons center"><img src="img/tips/tips02.svg"/></div> 12195-3' },
{ text: '<div class="tips-icons center"><img src="img/tips/tips03.svg"/></div> 12195-2' },
],
titleText: 'Tipps auswählen',
cancelText: 'Abbrechen',
cancel: function(index) {
return true;
},
buttonClicked: function(index) {
if(index === 0){ // Allgemein
$state.go('tab.tips01');
}
else if(index === 1){
$state.go('tab.tips02');
}
else if(index === 2){
$state.go('tab.tips03');
}
return true;
}
});
};
})
app.js :
.state('tab.tips01', {
url: '/tips01',
views: {
'tips01': {
templateUrl: 'templates/tips01.html',
controller: 'Tips01Ctrl'
}
}
})
.state('tab.tips02', {
url: '/tips02',
views: {
'tips02': {
templateUrl: 'templates/tips02.html',
controller: 'Tips02Ctrl'
}
}
})
.state('tab.tips03', {
url: '/tips03',
views: {
'tips03': {
templateUrl: 'templates/tips03.html',
controller: 'Tips03Ctrl'
}
}
})
how can I get this to work?
eno
May 7, 2015, 9:50pm
2
Maybe in your click handler, you close the ActionSheet first then do $state.go() ?
SDEK
May 8, 2015, 7:11am
3
did not help. As I mentioned it only works if I put the the ion-nav-view inside the ion-tab
<ion-tab title="Tipps" icon-off="ion-ios-information-outline" icon-on="ion-ios-information" ng-click="showTips()" >
<ion-nav-view name="tips01"></ion-nav-view>
</ion-tab>
but I only can put 1 ion-nav-view inside there.
If im putting all 3 outside the ion-tabs > it works but its kinda weird
Could you provide a codepen demo?
SDEK
May 18, 2015, 12:10pm
5
here the codepen. Press on About to get the action sheet.
If there is no view assigned to this tab it wont work…
<ion-tab title="About" icon="ion-ios-football" ng-click="showTips()">
</ion-tab>
eno
July 20, 2015, 7:39pm
6
Is there a parent state for these tabs? In our app, we have a screen with tabs where we have defined a parent state and each tab is defined as a child of that parent. So our states look like this:
// parent state
.state('app.connect', {
url: "/connect",
abstract: true,
views: {
'menuContent': {
templateUrl: "templates/connect.html",
controller: 'ConnectCtrl'
}
}
})
// child states - two tabs
.state('app.connect.friends', {
url: "/friends",
views: {
'friends': {
templateUrl: "templates/friends.html",
controller: 'FriendsCtrl'
}
}
})
.state('app.connect.groups', {
url: "/groups",
views: {
'groups': {
templateUrl: "templates/groups.html",
controller: 'GroupsCtrl'
}
}
})
So app.connect is the parent state, who’s template refers to the templates for each tab:
<ion-view>
<ion-nav-bar>
<ion-nav-title ui-sref="app.fabric">
<button class="button button-icon icon ion-ios-arrow-left pull-left fake-back-button" ui-sref="app.fabric"></button>
<img class='header-logo vertically-center' style="display:block;" src='img/logo.svg' />
</ion-nav-title>
</ion-nav-bar>
<ion-tabs class="tabs-top tabs-striped connect">
<ion-tab title="FRIENDS" ui-sref="app.connect.friends">
<ion-nav-view name="friends"></ion-nav-view>
</ion-tab>
<ion-tab title="GROUPS" ui-sref="app.connect.groups">
<ion-nav-view name="groups"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
Maybe this will help.
