2014-03-19 9 views
6

长名称,但这里是一个更好的解释。Angularjs + Ionic Framework:如何创建一个显示离子选项卡导航的新路线,但没有为自己定义选项卡?

我有一个名为“Login”的模板html文件。我在app.js定义,像这样

.state('login', { 
    url: '/login', 
    templateUrl: 'templates/login.html', 
    controller: 'createAccountCtrl' 
}) 

的路线通过使用UI-SREF =“登陆”我可以链接到任何地方,从这个模板是适合我的需求。

但是,主应用程序使用抽象路径“选项卡”来加载包含主导航的选项卡模板。

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

    <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-default"> 

    <!-- Home Tab --> 
    <ion-tab title="Home" icon="icon ion-home" href="#/tab/home"> 
     <ion-nav-view name="home-tab"></ion-nav-view> 
    </ion-tab> 

    <!-- Products Tab --> 
    <ion-tab title="Earn Points" icon="icon ion-ios7-plus-outline" href="#/tab/retail-store"> 
     <ion-nav-view name="retail-store-tab"></ion-nav-view> 
    </ion-tab> 

    </ion-tabs> 

我的问题是这样的。我希望登录页面像其他页面一样具有主应用程序的导航。这样,一个用户登录到登录页面,如果他们不登录,仍然可以导航到家庭或关于页面。但是,我不想自己的导航标签/图标显示。

可以直接将tabs html添加到login.html模板文件或可能隐藏登录图标/选项卡。我愿意接受建议和帮助。谢谢!

回答

14

这些选项卡意味着有自己的选项卡图标。因此,您无法将登录页面放入选项卡抽象视图中,而无需为其创建选项卡图标。

而不是将登录页面放在标签抽象视图下,您应该为登录页面放置单独的标签导航。

将以下视图加载到索引页中。

<ion-view title="'Login'"> 

<ion-content has-header="true" has-footer="true" padding="true"> 

Login page content goes here 

</ion-content> 

<div class="tabs tabs-icon-left"> 
    <a class="tab-item" href="#/tab/home"> 
    Home 
    </a> 
    <a class="tab-item" href="#/tab/about"> 
    About 
    </a> 
</div> 

</ion-view> 
+0

啊谢谢你!这正是我想要做的。不幸的是,我似乎没有代表赞扬你,但谢谢。完善 – tbondt

相关问题