Заголовок в моем ионном приложении не отображается

Я новичок в ионном каркасе, я пытаюсь отобразить глобальный заголовок с кнопкой «Назад» и кнопкой переключения и боковым меню, я сделал файл 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> 
 
\t <div class="bar bar-subheader 
 
\t  item-input-inset bar-light mysearchbar"> 
 
\t  <label class="item-input-wrapper"> 
 
\t  <i class="icon ion-search placeholder-icon"></i> 
 
\t  <input type="search" ng-model="query" placeholder="Search"> 
 
\t  </label> 
 
\t </div> 
 
\t <ion-content class="has-subheader content"> 
 
\t \t <ion-list> 
 
\t \t \t <ion-item class="item-thumbnail-left item-icon-right 
 
\t item-text-wrap" href="#/tab/feed/details"> 
 
\t \t \t \t <img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg"> 
 
\t \t \t \t <h2>Google's modular Ara phone d...</h2> 
 
\t \t \t \t <p>24.08.2015</p> 
 
\t \t \t \t <p>16:35</p> 
 
\t \t \t </ion-item> 
 
\t \t \t <ion-item class="item-thumbnail-left item-icon-right 
 
\t item-text-wrap" href="#/tab/feed/details"> 
 
\t \t \t \t <img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg"> 
 
\t \t \t \t <h2>Google's modular Ara phone d...</h2> 
 
\t \t \t \t <p>24.08.2015</p> 
 
\t \t \t \t <p>16:35</p> 
 
\t \t \t </ion-item> 
 
\t \t \t <ion-item class="item-thumbnail-left item-icon-right 
 
\t item-text-wrap" href="#/tab/feed/details"> 
 
\t \t \t \t <img src="http://www.extremetech.com/wp-content/uploads/2013/10/modular-motorola-project-ara1.jpg"> 
 
\t \t \t \t <h2>Google's modular Ara phone d...</h2> 
 
\t \t \t \t <p>24.08.2015</p> 
 
\t \t \t \t <p>16:35</p> 
 
\t \t \t </ion-item> 
 
\t \t </ion-list> 
 
\t </ion-content> 
 
</ion-view>

, когда я добавляю в моем feed.html этот HTML код:

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

Я получаю эту ошибку: 'Контроллер' ionNavBar ', требуемый директивой' ionNavButtons ', не может быть найден!'

Что я делаю неправильно?

источник

2015-08-25 Wahtel

также добавьте файл js, где вы объявляете маршруты. –

У меня есть файл js со всеми маршрутами – Wahtel

Я имел в виду добавить код файла маршрутов на ваш вопрос, чтобы мы могли видеть, что не так. –

Вам не нужно, чтобы добавить этот кусок кода в 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, любая страница с меню будет переключать кнопки или обратно buttone автоматически (если вы продолжите навигацию).

Вы хотите добавить menu.html в меню, но и в маршрутах вы делаете это

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

Вместо Youd должны делать

{ $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.

источник

2015-08-25 13:35:43

Спасибо за ваш ответ, да, я понимаю, что menu.html автоматически переключает кнопки, но я не могу понять, как работает файл menu.html, я добавил весь этот html-код в menu.html, но нигде не заголовок, что я должен сделать, чтобы они отображались в index.html и feed.html? – Wahtel

Что такое код в классе my-bar, который вы используете в '' –

make plunkr всего вашего кода. Тогда я легко решу вашу проблему. –

Заголовок в моем ионном приложении не отображается

ответ

Смежные вопросы