onsen ui - 包含文件

Question

我有几个页面的onsen-ui项目。我在每个页面上都有相同的导航器控件。无论如何，我可以从我的所有页面中提取此导航器控件，并将它保留一个文件，然后在我的所有页面中导入/包含此文件？在C＃中，我可以创建一个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> 

的“导航栏”的div我想提取出一些其他的文件，包括我的所有其他页/进口。有人能告诉我如何做到这一点？

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属性。