How do I select a dynamically loaded tab?


#1

Hi, I have recently gotten into ionic and I am already in love. It’s great. I was wondering if anyone can assist me with a small query. I have made an app to load reddit /r/funny subreddit, it’s going well, I have used tab navigation but I am having trouble as I dynamically load the full tab in, once it has loaded I would then like to select it, I have looked into

$scope.$on('$viewContentLoaded',function() {
    $ionicTabsDelegate.select(2);
})

However this throws a nice little error informing me that the tab does not exist. Or it simply does not do anything. I have made sure to check what the first tab index is (1). I have no idea what to do. Thanks for your help


#2

Hmm, with out seeing an example to try and work with, maybe try wrapping things with a $timeout. This way, things have a chance to load and compile.

$scope.$on('$viewContentLoaded',function() {
  $timeout(function(){
    $ionicTabsDelegate.select(2);
  });
})

#3

I Tried this before, tragically it didn’t work, it gave me this lovely error

TypeError: Cannot read property 'navViewName' of undefined
    at self.select (http://localhost:8080/lib/ionic/js/ionic.bundle.js:39966:31)
    at http://localhost:8080/lib/ionic/js/ionic.bundle.js:35952:41
    at Array.forEach (native)
    at delegate.(anonymous function) [as select] (http://localhost:8080/lib/ionic/js/ionic.bundle.js:35951:19)
    at http://localhost:8080/js/app.js:24:27
    at http://localhost:8080/lib/ionic/js/ionic.bundle.js:21691:28
    at completeOutstandingRequest (http://localhost:8080/lib/ionic/js/ionic.bundle.js:11901:10)
    at http://localhost:8080/lib/ionic/js/ionic.bundle.js:12202:7

If you would like more background here is where the process takes place

var reddit = angular.module('reddit', ['ionic', 'ngCordova'])
.run(function($ionicPlatform){$ionicPlatform.ready(function(){if(window.cordova&&window.cordova.plugins.Keyboard){cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true)}if(window.StatusBar){StatusBar.styleDefault()}})})
.config(function($stateProvider, $urlRouterProvider) {
	$stateProvider
	    .state('view', {
			url: '/r/:id',
	        templateUrl: 'templates/img.html',
	        controller: function($scope, $stateParams, $ionicTabsDelegate, $ionicModal, $timeout) {
	        	$scope.data = window.scope[$stateParams.id]
	            $scope.$evalAsync();
				$scope.$on('$viewContentLoaded',function() {
					$timeout(function(){
						$ionicTabsDelegate.select(2);
					});
				})
			}
	    })
	$urlRouterProvider.otherwise('/');
})

I have no idea what I can do to solve this, thanks for your help.


#4

Hmm, any chance you could create a demo of this in a git repo? I think I know what can be done but without see the whole thing I can’t be sure.


#5

Here’s everything I have https://github.com/MaxPinfield/ionic


#6

Any ideas? I am really stuck.