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>

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

＆＃34;导航栏＆＃34; div我想提取到其他文件，并在我的所有其他页面中包含/导入。有人能告诉我怎么做吗？

Answer 1

我明白了。诀窍是使用＆＃34; ng-include＆＃34;。

所以在我的控制器页面中我有：



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

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

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

</ons-page>

<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属性的双引号和单引号，如上所述。

onsen ui - 包含文件

1 个答案: