温泉用户界面-删除新页面上的标签栏

Question

我正在使用具有登录过程的应用程序。

我的第一页是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的标签栏也会显示在新页面中。

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

谢谢！

Answer 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>

`

Answer 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页面（您可以在主导航auth.html加载auth.html ，在auth.html内具有另一个导航auth.html ）。
最后，如果您仅删除选项卡并且只有一个导航器，则可以进一步简化操作。 那可能是最容易导航的。

另外，如果您认为这些选项中的任何一个似乎都不足够好，并且您对如何最简单地进行了更好的了解，请随时在onsenui存储库中编写功能请求。

温泉用户界面-删除新页面上的标签栏

问题描述

2 个解决方案

解决方案1
1 2016-04-05 08:48:51

解决方案2
-1 2016-04-05 11:17:56

温泉用户界面-删除新页面上的标签栏

问题描述

2 个解决方案

解决方案1 1 2016-04-05 08:48:51

解决方案2 -1 2016-04-05 11:17:56

解决方案1
1 2016-04-05 08:48:51

解决方案2
-1 2016-04-05 11:17:56