在angularjs ui-router和ionic中的子视图/状态之间的状态转换

Question

我正在使用离子选项卡项目。 IONIC使用angular JS的ui-router进行路由。

在一个标签中我希望有多个状态，我想在状态之间路由。

用于在我使用$state.g();

的状态之间进行路由

这是我的代码：

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：我在离子导航视图中有两个离子导航视图

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

现在在myHome.html我有一张图片。点击图片我正在使用$state.go('footer.home.about');

在我的test.html中，我点击了一张图片，想要使用myHome.html收回$state.go('footer.home.myhome')。

这就是问题所在。回到'footer.home.myhome'时，myhome内容没有显示出来。仍然会显示test.html内容，但其上的点击事件不会触发。

奇怪的行为。不明白我做错了什么。 它几乎像角js，无需担心离子。 有人能帮助我吗？

Answer 1

不确定这是否只是您的问题中的错误，但您应该使用$state.go('footer.home.mainhome')代替'myhome'

Answer 2

我尝试的方式不正确。

在这里找到了正确的方法：http://codepen.io/TimothyKrell/pen/bnukj

所以，相反，在抽象状态下加载两个子状态，有一个状态，另一个状态为子状态。

我的代码不是这样的

.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'
        }
    }
})