united united - 3 months ago 30
AngularJS Question

Change a div position dynamically in angularjs

I have a (complex) toolbar panel which can be on top or bottom of a page (it's configurable). Is there any way to avoid copy/paste the toolbar in bottom of the page?

Here is code in copy/paste way:

<div id="topToolbar" data-ng-show="configs.toolbarPosition=='TOP'">
<!-- toolbar -->
</div>

<div>
<!-- inner page contents -->
</div>

<div id="bottomToolbar" data-ng-show="configs.toolbarPosition=='BOTTOM'">
<!-- exactly copy/pasted toolbar -->
</div>

Answer

Keep the tool bar html in separate file, and include where ever you need.

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

Also if you needed add a controller for all functionality. This will help you to reuse your code.