離子選項卡和側面菜單導航問題

我學習並嘗試使用組合側邊菜單的選項卡創建離子應用程序。離子選項卡和側面菜單導航問題

側面菜單的部分是好的。我的主頁上還有一個額外的鏈接。這是我的問題：單擊鏈接後，我只能通過後退按鈕返回上一頁。而我的家庭標籤不起作用。我嘗試添加另一個鏈接到我的關於頁面，並且後退按鈕或主頁選項卡可以返回到前一頁，這是主頁。

這裏是我的.js文件：

angular.module('demo', ['ionic']) 

.config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/') 

    $stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'home.html' 
    }) 

    .state('about', { 
     url: '/about', 
     templateUrl: 'about.html' 
    }) 

    .state('contact', { 
     url: '/contact', 
     templateUrl: 'contact.html' 
    }) 
}) 

.controller('MyCtrl', function ($scope, $ionicSideMenuDelegate) { 
    $scope.showRightMenu = function() { 
    $ionicSideMenuDelegate.toggleRight(); 
    }; 
});

我找了其他類似的問題，並試圖切換到HREF UI的SREF。主頁選項卡仍然不起作用。我錯過了什麼？

這裏是我的.html：

<body ng-app="demo" ng-controller="MyCtrl"> 

<ion-side-menus> 
    <ion-side-menu-content> 
    <ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
     <ion-nav-back-button class="button-clear"> 
     <i class="ion-arrow-left-c"></i> Back </ion-nav-back-button> 
    </ion-nav-bar> 

    <ion-nav-view></ion-nav-view> 

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

     <ion-tab title="About" icon="ion-ios-information" ui-sref="about"> 
     <ion-nav-view name="about"></ion-nav-view> 
     </ion-tab> 

     <ion-tab title="Setting" icon="ion-navicon" ng-click="showRightMenu()"> 
     </ion-tab> 
    </ion-tabs> 
    </ion-side-menu-content> 

    <ion-side-menu side="right"> 
    <ion-header-bar class="bar-dark"> 
     <h1 class="title">Setting</h1> 
    </ion-header-bar> 

    <ion-content has-header="true"> 
     <ion-list> 
     <ion-item>Setting</ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

<script id="home.html" type="text/ng-template"> 
    <ion-view view-title="Home"> 
    <ion-content class="padding"> 
     <a class="button button-stable button-block" ui-sref="contact">Contact</a> 
     <a class="button button-stable button-block" ui-sref="about">About</a> 
    </ion-content> 
    </ion-view> 
</script> 

<script id="about.html" type="text/ng-template"> 
    <ion-view view-title="About"> 
    <ion-content class="padding"> 
    </ion-content> 
    </ion-view> 
</script> 

<script id="contact.html" type="text/ng-template"> 
    <ion-view view-title="Contact"> 
    <ion-content class="contactBg" scroll="false"> 
    </ion-content> 
    </ion-view> 
</script>

來源

2015-09-22 Joker H.

你試過我的解決方案嗎？乾杯。 – LeftyX

標籤具有歷史，只有當你導航到一個子項;選項卡中的子元素。這是唯一的情況，你應該有一個選項卡內的後退按鈕。

我注意到，你引用的是舊版本的框架的第一件事：

<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet"> 
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>

我會建議使用最新的，性能穩定：

<link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet"> 
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>

那麼你試圖將所有內容都包裝在一個大容器中。

通常你會做的是創建一個菜單（menu.html）：

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
    <ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 
     <!-- 
     <ion-nav-buttons side="right"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="right"> 
     </button> 
     </ion-nav-buttons> 
     --> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="right"> 
    <ion-header-bar class="bar-dark"> 
     <h1 class="title">Settings</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
       <ion-item nav-clear href="#"> 
      Settings 
     </ion-item> 
     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus>

如果你有一個<ion-nav-view name="menuContent"></ion-nav-view>。這是所有視圖將被加載的地方。

我已經隱藏了導航按鈕菜單，所以你不會看到它：

<!-- 
<ion-nav-buttons side="right"> 
    <button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button> 
</ion-nav-buttons> 
-->

那麼你將有你的標籤容器（標籤。HTML）：

<ion-view view-title="Tabs"> 
    <ion-tabs class="tabs-icon-top tabs-positive"> 
    <ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="app.tabs.home"> 
     <ion-nav-view name="home"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="About" icon-on="ion-ios-information" icon-off="ion-ios-information-outline" ui-sref="app.tabs.about"> 
     <ion-nav-view name="about"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Contact" ui-sref="app.tabs.contact" class="ng-hide"> 
     <ion-nav-view name="contact"></ion-nav-view> 
    </ion-tab> 

    <ion-tab title="Setting" icon-on="ion-navicon" icon-off="ion-navicon" ng-click="showRightMenu()"></ion-tab> 
    </ion-tabs> 
</ion-view>

我已經隱藏的標籤接觸class="ng-hide"，因爲我真的不明白你在那裏做什麼（當您單擊主頁按鈕將被加載）：

<ion-tab title="Contact" ui-sref="app.tabs.contact" class="ng-hide"> 
    <ion-nav-view name="contact"></ion-nav-view> 
</ion-tab>

每個選項卡都已經得到了它的ion-nav-view容器其中，具體的標籤會被加載：

<ion-nav-view name="home"></ion-nav-view>

您應該配置您的狀態，這樣的菜單是主要的，AB加強海峽狀態：

.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "menu.html" 
    }) 

    .state('app.tabs', { 
    url: "/tabs", 
    views: { 
     'menuContent': { 
     templateUrl: "tabs.html", 
     controller: 'tabsController' 
     } 
    } 
    }) 

    .state('app.tabs.home', { 
    url: "/home", 
    views: { 
     'home': { 
     templateUrl: "home.html", 
     } 
    } 
    }) 

    .state('app.tabs.about', { 
    url: "/about", 
    views: { 
     'about': { 
     templateUrl: "about.html", 
     } 
    } 
    }) 

    .state('app.tabs.contact', { 
     url: "/contact", 
     views: { 
     'contact': { 
      templateUrl: "contact.html" 
     } 
     } 
    }); 
    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/app/tabs'); 
});

爲標籤的容器（app.tabs）國家將在menuContent

.state('app.tabs', { 
    url: "/tabs", 
    views: { 
     'menuContent': { 
     templateUrl: "tabs.html", 
     controller: 'tabsController' 
     } 
    } 
    })

被加載，而所有其他（具體選項卡）都會有自己的看法：

.state('app.tabs.home', { 
    url: "/home", 
    views: { 
     'home': { 
     templateUrl: "home.html", 
     } 
    } 
    })

我也使用了標籤容器控制器=>tabsController：

.controller('tabsController', function($scope, $ionicSideMenuDelegate) { 

    $scope.showRightMenu = function() { 
    $ionicSideMenuDelegate.toggleRight(); 
    }; 

});

所以你可以管理你的側面菜單。

大致上你的應用應該看起來像this。

來源

2015-09-22 09:26:20 LeftyX

謝謝，LeftyX。有用！似乎我不知道有關嵌套視圖和路由系統的概念。現在我懂了。欣賞！！ –

很高興我幫了忙。如果您滿意，請您接受我的回答嗎？ Upvotes也非常讚賞:-)乾杯。 – LeftyX

我已經像你一樣構建了我的應用程序，它在瀏覽器中正常工作。但是當我在手機或模擬器上測試應用程序時，當我更改選項卡時，將重新加載。這不是SPA應該如何表現的。你可以清楚地看到，重新加載，但它應該只更新標題。你有什麼想法如何解決這個問題？ – Max

離子選項卡和側面菜單導航問題

回答

相關問題