一个选项卡中的多个视图

Question

这是我正在尝试做的一个简单示例。
我有 2 个选项卡（主页和新闻）和 3 个视图（主页、新闻和详细信息）。当我单击主页和新闻选项卡时，它会分别显示主页和新闻页面。
这是我的路由文件：

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('tabs', {
        url: '/tabs',
        abstract: true,
        templateUrl: 'templates/tabs.html',
    })
    .state('tabs.home', {
        url: '/home',
        views: {
            'home-tab': {
                templateUrl: 'templates/home.html',
                controller: 'HomeCtrl'
            }
        }
    })
    .state('tabs.news', {
        url: '/news',
        views: {
            'news-tab': {
                templateUrl: 'templates/news.html',
                controller: 'NewsCtrl'
            }
        }
    })
    .state('tabs.details', {
        url: '/details',
        views: {
            'details-tab': {
                templateUrl: 'templates/details.html',
                controller: 'DetailsCtrl'
            }
        }
    })
$urlRouterProvider.otherwise('/tabs/home');

这是我的选项卡视图：

<ion-tabs class="tabs-icon-top tabs-positive ">
    <ion-tab title="Home" icon="ion-home" ui-sref="tabs.home">
        <ion-nav-view name="home-tab"></ion-nav-view>   
    </ion-tab>  
    <ion-tab title="News" icon="ion-social-reddit" ui-sref="tabs.news">
        <ion-nav-view name="news-tab"></ion-nav-view>   
    </ion-tab>  
</ion-tabs>

我觉得还行... 现在我想从新闻页面转到详细信息页面。所以我在新闻页面中添加了一个按钮，如下所示：

<ion-view view-title="News">
    <ion-content class="padding content-stable">
        <button class="button button-positive" ui-sref="tabs.details">Go to Details</button>
    </ion-content>  
</ion-view>

当我点击按钮时，我仍然在同一页面上，我的视图保持不变。奇怪了。。。但是我浏览器里的URL变成了

http://localhost:8101/#/tabs/details

证明状态发生了变化。我可能错过了一件事......但是什么？？？

Answer 1

我找到了我自己问题的答案！
这是一个路由错误...
为此，tabs.details 状态必须与父选项卡具有相同的视图名称。

.state('tabs.news', {
    url: '/news',
    views: {
        'news-tab': {
            templateUrl: 'templates/news.html',
            controller: 'NewsCtrl'
        }
    }
})
.state('tabs.details', {
    url: '/details',
    views: {
        'news-tab': { // SAME VIEW NAME!!! 
            templateUrl: 'templates/details.html',
            controller: 'DetailsCtrl'
        }
    }
})

一个选项卡中的多个视图

Multiple Views in one Tab

angularjs

angular-ui-router

ionic