Question

我知道这已经解决了几次，但我正在试图找出构建这个解决方案的正确方法：

我有5个标签，其中所有5个标签，在这些标签中，我需要使用相同的视图和多个标签的相同网址。例如：

feedTab (/feed, tab is tab-feed) -> checkinDetail (checkin/:checkinId) -> ItemDetail (item/:itemId) profileTab (/profile, tab is tab-profile) -> checkinDetail (checkin/:checkinId) -> ItemDetail (item/:itemId)

这可能吗？如果不是 - 使用Tabs在离子中做到这一点的最佳方法是什么？

Answer 1

我已经这样做了，你只需要为每个可能的细节视图定义一个状态。例如：

在我的应用程序中，我有一个可以从多个选项卡访问的详细视图。

模板/站驾式detail.html

我有两个标签可以访问上面的详细信息视图：

tab.profile
tab.rides

他们的状态定义如下：

.state('tab.profile', {
        url: '/profile',
        views: {
            'tab-profile': {
                templateUrl: 'templates/tab-profile.html',
                controller: 'ProfileCtrl'
            }
        }
    })

    .state('tab.rides', {
        url: '/rides',
        params: {
            issearch: null,
            radius: null
        },
        views: {
            'tab-rides': {
                templateUrl: 'templates/tab-rides.html',
                controller: 'RidesCtrl'
            }
        }
    })

为了从上面的两个标签中访问骑行细节视图，我为此定义了两种状态，如下所示：

 .state('tab.ride-detail', {
        url: '/rides/:rideId',
        views: {
            'tab-rides': {
                templateUrl: 'templates/ride-detail.html',
                controller: 'RideDetailCtrl'
            }
        }
    })

.state('tab.profile-detail', {
        url: '/profile/:rideId',
        views: {
            'tab-profile': {
                templateUrl: 'templates/ride-detail.html',
                controller: 'RideDetailCtrl'
            }
        }
    })

然后从游乐设施标签我调用下面的代码进入详细视图：

 $state.go('tab.ride-detail', {
        rideId: rideid
    });

并从个人资料标签调用：

 $state.go('tab.profile-detail', {
        rideId: rideid
    });

然后在您的视图中，您可以使用ng-click =“godetail（checkinId）”

然后根据godetail函数调用的控制器更改状态调用，所以在我的情况下从配置文件选项卡调用godetail时：

 $scope.godetail = function (rideid) {
    $state.go('tab.profile-detail', {
        rideId: rideid
    });
};

从骑行标签调用时：

$scope.godetail = function (rideid) {
        $state.go('tab.ride-detail', {
            rideId: rideid
        });
    };

希望这有帮助。

离子框架 - 为多个选项卡使用相同视图

1 个答案: