0

我有一个有几个页面的 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>

我想将“导航栏” div 提取到其他文件并在我的所有其他页面中包含/导入。有人可以告诉我该怎么做吗？

4

1 回答 1

3

我想到了。诀窍是使用“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 属性使用双引号和单引号，就像我在上面所做的那样。

于 2015-06-14T03:35:20.127 回答