CODEWITHSUNDEEP
angular-ui-routerionic-framework
praveen seela
praveen seela

Reputation: 528

state transition between child views/states in angularjs ui-router and ionic

I am using an ionic tabs project. IONIC uses angular JS's ui-router for routing.

In a tab I want to have multiple state and I want to route between states.

for routing between states i am using $state.g();

here is my code:

app.js

.config(function($stateProvider,$urlRouterProvider){
    $stateProvider
.state('footer',{
    url:'/footer',
    abstract:true,
        templateUrl:'templates/footer.html'
})

.state('footer.home',{
    url:'/home',
    abstract:true,
    views:{
        'footer-home':{
            templateUrl:'/templates/hometemplate.html',
            controller:'HomeCtrl'
        }
    }
})
.state('footer.home.mainhome',{
    url:'/mainhome',
    parent:'footer.home',
    views:{
        'footer-home-landing':{
            templateUrl:'/templates/myHome.html',
            controller:'HomeCtrl'
        }
    }
})
.state('footer.home.about',{
    url:'/about',
    parent:'footer.home',
    views:{
        'footer-home-about':{
            templateUrl:'templates/test.html',//template:'<p>asasdfa</p>',
            controller:'AboutCtrl'
        }
    }
})

hometemplate.html: i have two ion-nav-view's inside on ion-nav-view

<ion-nav-view view-title="HomeTemplate">
 <ion-nav-view name="footer-home-landing"></ion-nav-view>
 <ion-nav-view name="footer-home-about"></ion-nav-view>
</ion-nav-view >

Now in myHome.html i have an image. on click of image I am using $state.go('footer.home.about');

In my test.html, i have one image on click of it want to take back to my myHome.html using $state.go('footer.home.myhome').

Here comes the problem. while going back to 'footer.home.myhome' myhome contents are not getting displayed. still the test.html contents are displaying but the click events on it are not triggering.

Strange behavior. Not understanding where I did wrong. its almost like angular js, no need to worry about ionic. Can somebody help me?

Upvotes: 1

Views: 3415

Answers (2)

praveen seela
praveen seela

Reputation: 528

The way i was trying is not correct.

found the right way of doing it here: http://codepen.io/TimothyKrell/pen/bnukj

so, instead loading two child states in an abstract state, have one state and have the other as their child state.

my code is not this way

.state('footer',{
    url:'/footer',
    abstract:true,
    // views:{
    // 'MainScreen':{
        templateUrl:'templates/footer.html',
        data: {
            requireLogin: true
        }
    //}
    //}

})

.state('footer.home',{
    url:'/home',
    // abstract:true,
    views:{
        'footer-home':{
            templateUrl:'/templates/Home.html',
            controller:'HIPACCtrl'
        },

    }
})

.state('footer.home.about',{
    url:'/abouthipac',
    //parent:'footer.home',
    views:{
        'footer-home@footer':{
            templateUrl:'templates/test.html',//template:'<p>asasdfa</p>',
            controller:'AboutCtrl'
        }
    }
})

Upvotes: 0

aquint
aquint

Reputation: 512

Not sure if this is just a mistake in your question but you should be using $state.go('footer.home.mainhome') instead of 'myhome'

Upvotes: 0

Related Questions