angularjs - onsen ui - Include Files -
i have onsen-ui project several pages. have same navigator control on each of these pages. there anyway can extract navigator control out of pages , keep 1 file, import/include file in pages? in c# can create usercontrol , include usercontrol in pages. i'm looking similar in onsen-ui.
consider following:
<ons-page ng-controller="mycontroller 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"> 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> /*... page content...*/ </ons-scroller> </ons-page>
the "navigation-bar" div i'd extract out other file , include/import in other pages. can tell me how this?
i figured out. trick use "ng-include".
so in controller-page have:
<ons-page ng-controller="mycontroller myctrl"> <ng-include src="'incnavbar.html'"></ng-include> <ons-scroller> /*... page content...*/ </ons-scroller> </ons-page>
and have filed called incnavbar.html includes following:
<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"> 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>
keep in mind must use both double , single quotes src attribute i've done above.
Comments
Post a Comment