Onsen UI - 在新页面上删除标签栏答案

【问题标题】：Onsen UI - Delete tabbar on new pageOnsen UI - 在新页面上删除标签栏
【发布时间】：2016-04-05 08:32:41
【问题描述】：

我正在开发一个带有登录过程的应用程序。

我的第一页是index.html

 <body ng-controller="AppController">
        <script src="scripts/index.js"></script>
        <ons-tabbar var="menu">
            <ons-tab page="login.html" label="Home" icon="ion-home" active="true"></ons-tab>
            <ons-tab page="register.html" label="Über uns" icon="ion-ios-cog"></ons-tab>
        </ons-tabbar>
        <ons-template id="login.html">
            <ons-navigator animation="slide" var="app.navi">
                <ons-page ng-controller="PageController">
                  <ons-toolbar>
                    <div class="center">Anmelden</div>
                  </ons-toolbar>
                    <div class="login-form">
                        <input type="text" ng-model="loginEmail" class="text-input--underbar" placeholder="E-Mail" value="">
                        <input type="password" ng-model="loginPassword" class="text-input--underbar" placeholder="Passwort" value="">
                        <br><br>
                        <ons-button modifier="large" ng-click="login()" class="login-button">Anmelden</ons-button>
                        <br><br>
                        <ons-button modifier="quiet" ng-click="app.navi.pushPage('register.html');" class="register">Noch kein Mitglied ?</ons-button>
                        <ons-button modifier="quiet" ng-click="app.navi.pushPage('lostpasswort.html');" class="forgot-password">Passwort vergessen ?</ons-button>
                    </div>
                </ons-page>
            </ons-navigator>
        </ons-template>
        <ons-template id="register.html">
            <ons-page>
              <ons-toolbar>
                <div class="left"><ons-back-button>Zurück</ons-back-button></div>
                <div class="center">Registrieren</div>
              </ons-toolbar>

                <div class="login-form">
                    <input type="text" class="text-input--underbar" placeholder="Vorname" value="">
                    <input type="text" class="text-input--underbar" placeholder="Nachname" value="">
                    <input type="email" class="text-input--underbar" placeholder="E-Mail" value="">
                    <input type="password" class="text-input--underbar" placeholder="Passwort" value="">
                    <input type="password" class="text-input--underbar" placeholder="Passwort bestätigen" value="">
                    <br><br>
                    <ons-button modifier="large" class="login-button">Registrieren</ons-button>
                </div>
            </ons-page>
        </ons-template>
        <ons-template id="lostpasswort.html">
            <ons-page>
              <ons-toolbar>
                <div class="left"><ons-back-button>Zurück</ons-back-button></div>
                <div class="center">Registrieren</div>
              </ons-toolbar>

                <div class="login-form">
                    <input type="email" class="text-input--underbar" placeholder="E-Mail" value="">
                    <br><br>
                    <ons-button modifier="large" class="login-button">Neues Passwort senden</ons-button>
                </div>
            </ons-page>
        </ons-template>


        <ons-template id="about.html">
          <ons-toolbar>
            <div class="center">Über uns</div>
          </ons-toolbar>
          <ons-page>
            <p style="padding-top: 100px; color: #999; text-align: center">Page Contents</p>
          </ons-page>
        </ons-template>
    </body>

登录成功后我想更改页面(main.html)。这可行，但来自index.html 的标签栏也会显示在新页面中。

如何删除旧标签栏并在新页面中设置新标签栏？

谢谢！

【问题讨论】：

标签： javascript jquery angularjs cordova onsen-ui

【解决方案1】：

我想你可以使用ng-if。从您的操作登录后，您发送一个 viewbag 标志，然后使用 ng-if 到您想查看或不查看的选项卡栏。 `

<div class="tabbable tabs-left" role="tabpanel" ng-if="'@ViewBag.tabId'=='p'">
  <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="active"><a href="#a" aria-controls="a" role="tab" data-toggle="tab">Basic</a></li>
  </ul>
</div>

【讨论】：

【解决方案2】：

基本上，如果您想导航到没有标签栏的页面，那么标签栏应该在导航器内，而不是相反。

<ons-navigator animation="slide" var="app.navi">
    <ons-tabbar var="menu">
        <ons-tab page="login.html" label="Home" icon="ion-home" active="true"></ons-tab>
        <ons-tab page="register.html" label="Über uns" icon="ion-ios-cog"></ons-tab>
    </ons-tabbar>
</ons-navigator>

目前导航器的方式实际上是在登录内部，这使得导航有些奇怪。如果用户单击注册选项卡，那么他只会转到该选项卡，但如果他单击注册按钮，那么他仍将处于登录选项卡中，但选项卡的内容将发生变化。同样在一种情况下，他会看到幻灯片动画，而在另一种情况下，它只会更改内容。

如果您只选择一种导航到特定页面的方式，也许会更好。

如果您使用标签，那么您可以使用标签栏中的loadPage 和setActiveTab 方法来获取身份验证页面。对于之后的其他页面，您可以使用导航器的方法。
如果您喜欢使用导航器，那么也许您可以使用嵌套导航器。一个用于主导航，一个用于身份验证页面（您可以在主导航器中加载一个auth.html，并在auth.html 中放置另一个导航器）。
最后，如果您只删除标签栏并且只有一个导航器，您可以进一步简化事情。这可能是最容易导航的。

此外，如果您认为这些选项似乎都不够好，并且您对如何最容易做到有更好的了解，请随时write a feature request at the onsenui repo。

【讨论】：