Html 在angularjs中动态更改div位置

我有一个（复杂的）工具栏面板，可以在页面的顶部或底部（它是可配置的）。有没有办法避免复制/粘贴页面底部的工具栏

以下是复制/粘贴方式的代码：

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

---

将工具栏html保存在单独的文件中，并在需要时将其包括在内

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

---

如果需要，也可以为所有功能添加控制器。这将帮助您重用代码。

您可以检查组件是如何制作的 并制作组件