在div中动态加载html部分

我有一个有两列的网页。在左列中，我显示了按钮。当按下按钮时，应在右侧列中加载HTML部分。HTML部分可以看作是一个小部件

问题是，我不确定如何使用AngularJS动态加载右侧列中的HTML部分

所以我基本上有这些布局：

我的主页：

<div class="left-col">
  <button>Widget 1</button>
  <button>Widget 2</button>
</div>
<div class="right-col">
  <div class="selected-widgets">
    <!-- dynamic partial HTML will be loaded here -->
  </div>
</div>

我的部分：

Widget1_Partial.html

<div>
  <h2>Widget 1</h2>
  <input name="width" value="">
  <input name="height" value="">
</div>

<div>
  <h2>Widget 2</h2>
  <input name="size" value="">
</div>

Widget2_Partial.html

<div>
  <h2>Widget 1</h2>
  <input name="width" value="">
  <input name="height" value="">
</div>

<div>
  <h2>Widget 2</h2>
  <input name="size" value="">
</div>

因此，我想在所选的widgets div中加载partials。如何使用AngularJS实现这一点？

我建议您使用ng include。它已经查阅了有关该部分的文档。我想它正是你想要的。 以下是相关文档的参考：

---

我想你应该看看@domakas，当你想在ng视图中加载一些东西时，它不是吗？页面已加载到我的案例中。当我按下某个按钮时，我只想在div中加载其他较小的部分。@Vivendi:不。ui路由器更进一步，允许视图包含子视图。