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

【问题标题】：state transition between child views/states in angularjs ui-router and ionicangularjs ui-router和ionic中的子视图/状态之间的状态转换
【发布时间】：2015-05-14 12:42:01
【问题描述】：

我正在使用离子标签项目。 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 上有两个 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 >

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

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

问题来了。返回“footer.home.myhome”时，myhome 内容未显示。 test.html 内容仍在显示，但其上的点击事件未触发。

奇怪的行为。不明白我哪里做错了。它几乎就像 Angular js，无需担心 ionic。有人可以帮助我吗？

【问题讨论】：

标签： angular-ui-router ionic

【解决方案1】：

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

【讨论】：

抱歉，我的错字有问题。我实际上是在使用 $state.go('footer.home.mainhome') 。但还是看不到主屋。它只显示关于页面的内容。

【解决方案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'
        }
    }
})

【讨论】：