首页 文章

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

提问于
浏览 次
1

我正在使用离子选项卡项目 . 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 中，我有一个图像点击它想要使用 $state.go('footer.home.myhome') 回到我的 myHome.html .

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

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

angular-ui-router ionic

2 回答

  • 0

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

    回复于
  • 0

    我尝试的方式不正确 .

    在这里找到了正确的方法：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'
        }
    }
})
    回复于

相关问题