在 div 中动态加载 html 部分答案

【问题标题】：Load html partials dynamically in a div在 div 中动态加载 html 部分
【发布时间】：2014-07-07 07:58:58
【问题描述】：

我有一个包含两列的网页。在左栏中，我显示按钮。当按下按钮时，应在右列中加载 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>

Widget2_Partial.html

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

所以我想将部分加载到selected-widgets div 中。如何使用 AngularJS 做到这一点？

【问题讨论】：

我觉得你应该看看github.com/angular-ui/ui-router
@domakas 当你想在ng-view 中加载一些东西时，这不是吗？在我的情况下，该页面已经加载。当我按下某个按钮时，我只想在div 中加载更多更小的部分。
@Vivendi：没有。 ui-router 更进一步，允许视图拥有子视图。

标签： html angularjs partials

【解决方案1】：

我建议您使用ng-include。它已查看有关此部分的文档。我认为它正是您正在寻找的东西。以下是有关它的文档的参考：

https://docs.angularjs.org/api/ng/directive/ngInclude

【讨论】：