gpt4 book ai didi

html - 我的 ionic 应用程序中的标题不显示

转载 作者:行者123 更新时间:2023-11-28 16:55:38 26 4
gpt4 key购买 nike

我是 ionic 框架的新手,我正在尝试显示带有后退按钮和切换按钮以及侧边菜单的全局标题,我做了文件 menu.html 并将所有这些都放在这里:

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="my-bar">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="icon ion-navicon button button-clear mybutton" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menu"></ion-nav-view>
</ion-side-menu-content>

<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>

但是我不明白如何在我的页面上显示它,这是我的 index.html:

<body ng-app="starter">


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

</body>

还有我的另一个页面 feed.html:

<ion-view>
<div class="bar bar-subheader
item-input-inset bar-light mysearchbar">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search">
</label>
</div>
<ion-content class="has-subheader content">
<ion-list>
<ion-item class="item-thumbnail-left item-icon-right
item-text-wrap" href="#/tab/feed/details">
<img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg">
<h2>Google's modular Ara phone d...</h2>
<p>24.08.2015</p>
<p>16:35</p>
</ion-item>
<ion-item class="item-thumbnail-left item-icon-right
item-text-wrap" href="#/tab/feed/details">
<img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg">
<h2>Google's modular Ara phone d...</h2>
<p>24.08.2015</p>
<p>16:35</p>
</ion-item>
<ion-item class="item-thumbnail-left item-icon-right
item-text-wrap" href="#/tab/feed/details">
<img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg">
<h2>Google's modular Ara phone d...</h2>
<p>24.08.2015</p>
<p>16:35</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>

当我在 feed.html 中添加此 html 代码时:

 <ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon mybutton"></button>
</ion-nav-buttons>

我收到这个错误: “无法找到指令‘ionNavButtons’所需的 Controller ‘ionNavBar’!”

我做错了什么?

最佳答案

您不必在 feed.html 中添加这段代码

<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon mybutton"></button>
</ion-nav-buttons>

你已经添加了

<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="icon ion-navicon button button-clear mybutton" menu-toggle="left"></button>
</ion-nav-buttons>

menu.html 中,任何带有菜单的页面都会自动具有切换按钮或后退按钮(以防您在导航中走得更远)。

您想将 menu.html 添加为 menu ,但是在路由中您正在这样做

{ $stateProvider .state('tabs', { url: '/tab', abstract: true, templateUrl: 'templates/tabs.html' })

你应该这样做

{ $stateProvider .state('menu', { url: '/menu', abstract: true, templateUrl: 'templates/menu.html' })

并进一步将 feed 路由更改为

.state('menu.feed', {url: '/feed', views: {'feed-tab': {templateUrl: 'templates/feed.html', controller: 'MainCtrl'}}})

但是因为您将选项卡与菜单方案混合在一起。我会建议您使用 ionic start myApp sidemenu 创建新元素并查看 sidemenu 模板是如何完成的

关于html - 我的 ionic 应用程序中的标题不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32204602/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com