Question

我是离子框架的新手，我试图用后退按钮和切换按钮和侧面菜单显示全局标题，我做了文件menu.html并在这里推出了所有这些：

＆＃13;

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

＆＃13;

但是我无法理解如何在我的网页上显示它，这是我的index.html：

＆＃13;

<body ng-app="starter">

    
  <ion-nav-view></ion-nav-view>
    
  </body>

＆＃13;

和我的另一页feed.html：

＆＃13;

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

＆＃13;

当我在我的feed.html中添加这个HTML代码时：

＆＃13;

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

＆＃13;

我收到此错误：＆＃39; Controller＆＃39; ionNavBar＆＃39;，指令＆＃39; ionNavButtons＆＃39;，无法找到！＆＃39;

我做错了什么？

Answer 1

您无需在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作为菜单，但是在您正在执行此操作的路线中

{ $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创建新项目，并了解如何完成侧面模板

我的离子应用程序中的标题不显示

1 个答案: