onsen ui - Включить файлы

Question

У меня есть проект onsen-ui с несколькими страницами. На каждой из этих страниц у меня есть один и тот же элемент управления. Есть ли в любом случае я могу извлечь этот контроль навигатора из всех моих страниц и сохранить его в одном файле, а затем импортировать/включить этот файл на всех моих страницах? В C# я могу создать UserControl и включить этот UserControl на всех моих страницах. Я ищу что-то подобное в Onsen-UI.

Рассмотрим следующий пример:

<ons-page ng-controller="MyController as myCtrl"> 

    <div class="navigation-bar"> 

     <div class="navigation-bar__left"> 
      <ons-toolbar-button ng-click="myCtrl.back()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button> 
     </div> 

     <div class="navigation-bar__center"> 
      My Page 
     </div> 

     <div class="navigation-bar__right"> 
      <ons-toolbar-button ng-click="myCtrl.doSomeTask()"><ons-icon icon="fa-cog"></ons-icon></ons-toolbar-button> 
     </div> 
    </div> 

    <ons-scroller> 
     /*... my page content...*/ 
    </ons-scroller> 

</ons-page> 

«NAVIGATION-бар» ДИВ Я хотел бы, чтобы извлечь из какой-то другой файл и включить/импорт во всех других моих страницах. Может ли кто-нибудь сказать мне, как это сделать?

Answer 1

Я понял. Хитрость заключается в использовании «ng-include».

Так что в моем контроллере-странице у меня есть:

<ons-page ng-controller="MyController as myCtrl"> 

    <ng-include src="'incNavBar.html'"></ng-include> 

    <ons-scroller> 
     /*... my page content...*/ 
    </ons-scroller> 

</ons-page> 

И я другой поданной под названием incNavBar.html, который включает в себя следующее:

<div class="navigation-bar"> 

    <div class="navigation-bar__left"> 
     <ons-toolbar-button ng-click="myCtrl.back()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button> 
    </div> 

    <div class="navigation-bar__center"> 
     My Page 
    </div> 

    <div class="navigation-bar__right"> 
     <ons-toolbar-button ng-click="myCtrl.doSomeTask()"><ons-icon icon="fa-cog"></ons-icon></ons-toolbar-button> 
    </div> 
</div> 

Имейте в виду, вы должны использовать как двойные, и одиночные кавычки для атрибута src, как я уже говорил выше.