Navigate within a ActionSheet to a view with $state.go


#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?


#2

Maybe in your click handler, you close the ActionSheet first then do $state.go() ?


#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


#4

Could you provide a codepen demo?


#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>

#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.