请教嵌套ion-nav-view的问题

tearar · 发表于 2015-12-3 18:13:36

在嵌套的ion-nav-view中跳转出现问题。
子ion-nav-view的页面控制父ion-nav-view切换状态时，总是跳转不成功
首页文件 index.html中有一个ion-nav-view

<body>
<ion-nav-view name="topNavView"></ion-nav-view>
</body>

复制代码

业务过程中，topNavView打开了main.html，这个main.html中也有一个ion-nav-view

<ion-nav-view name="sonNavView" animation="slide-left-right"></ion-nav-view>

复制代码

sonNavView打开一个子页面son.html

<button ng-click="show()"></button>

复制代码

在这个show()方法想让父ion-nav-view打开另外一个页面。

config如下：

$stateProvider.state('main.a', {
url: "/subpageA",
views: {
'sonNavView' : {
templateUrl: "templates/son.html",
controller: 'aCtrl'
}
}
});
$stateProvider.state('main2', {
url: "/main2",
views: {
'topNavView' : {
templateUrl: "templates/main2.html",
controller: 'main2Ctrl'
}
}
});

复制代码

controller如下：

app.controller('aCtrl', function($scope, $state, $stateParams, $location) {
$scope.show = function(){
$state.go('main2');
};
});
app.controller('main2Ctrl', function($scope, $state, $stateParams, $location){
alert("hello");
});

复制代码

结果是能看到main2界面被加载，同时controller：main2Ctrl中的alert也执行了，但是界面马上会打开main.html
哪位朋友知道这怎么解决？

admin · 发表于 2015-12-4 09:27:32

ionic基于ui-router的看看ui-router 相关文档，或者看看我们的ionic基础教程路由哪一讲

tearar · 发表于 2015-12-4 13:32:21

本帖最后由 tearar 于 2015-12-4 13:51 编辑

admin 发表于 2015-12-4 09:27
ionic基于ui-router的看看ui-router 相关文档，或者看看我们的ionic基础教程路由哪一讲 ...

我大概定位到问题的原因了，问题出在ion-tabs上：我的ion-tabs有第四个tab，当第4个tab的on-select上绑定一个$state.go()事件后，一定会出错！
main页面如下：

<ion-view title="Main">
<ion-nav-bar align-title="center" class="bar-dark"></ion-nav-bar>
<ion-nav-view name="subpageContent" animation="slide-left-right"></ion-nav-view>
<ion-footer-bar>
<ion-tabs class="tabs-balanced tabs-icon-only">
<ion-tab title="view1" icon-on="ion-ios7-keypad" icon-off="ion-ios7-keypad-outline" on-select="show('view1')"></ion-tab>
<ion-tab title="view2" icon-on="ion-ios7-chatbubble" icon-off="ion-ios7-chatbubble-outline" on-select="show('view2')"></ion-tab>
<ion-tab title="view3" icon-on="ion-ios7-people" icon-off="ion-ios7-people-outline" on-select="show('view3')"></ion-tab>
<ion-tab title="view4" icon-on="ion-ios7-keypad" icon-off="ion-ios7-keypad-outline" on-select="show('view4')"></ion-tab>
</ion-tabs>
</ion-footer-bar>
</ion-view>

复制代码

main页面绑定的controller如下：

app.controller('MainCtrl', function($scope, $state, $stateParams, $location, $ionicTabsDelegate) {
$scope.show = function(name){
if(name == "view1") {
$state.go('main.view1');
return;
}
if(name == "view2"){
$state.go('main.view2');
return;
}
if(name == "view3") {
$state.go('main.view3');
return;
}
if(name == "view4") {
$state.go('main.view4');
return;
}
};
});

复制代码

在view1、view2、view4的页面中都只有<ion-view title="view"></ion-view>
在view3中有一button，button的事件是在父ion-nav-view上进行页面切换。
在view3中点击button跳转时，就一定会返回main.html。
当把 if(name == "view4") { $state.go('main.view4'); return; } 中的$state.go()注释掉后，就不会出现错误。
或者把第4个ion-tab中的on-select改为ng-click也不会出错。
再或者，把4个ion-tab减成3个，也不会出错

不知道是不是ion-tabs的bug

		自动登录	找回密码
密码			立即注册

请教嵌套ion-nav-view的问题

站长推荐 /1