Javascript 有没有办法在AngularJS中将html表单动态插入到div中？

我正在开发AngularJS数据收集“向导”应用程序。 在这个向导中，大约有100个步骤。 我正在寻找一种在每个向导步骤标记中动态插入/合并不同html表单的方法。 向导本身的结构如下所示：

<wizard on-finish="finished()"> 
    <wz-step title="Step 1">
        <h1>This is Step 1</h1>
        <p>Need to dynamically insert a form here</p>
        <input type="submit" wz-next value="Proceed to Next Step" />
    </wz-step>
    <wz-step title="Step 2">
        <h1>This is Step 2</h1>
        <p>Need to dynamically insert a form here</p>
        <input type="submit" wz-next value="Proceed to Next Step" />
    </wz-step>
    <wz-step title="Step 3">
    <h1>This is Step 3</h1>
        <p>Even more steps!!</p>
        <input type="submit" wz-next value="Finish now" />
    </wz-step>
</wizard>

这是第一步
需要在此处动态插入表单

这是第二步
需要在此处动态插入表单

这是第三步
更多的步骤

我更希望有100个单独的小html文件（每个步骤一个），然后将所有标记放在一个wizard.html文件中。 理想情况下，我希望有一个名为step1.html的文件，其内容将动态加载到wizard.html中，以代替

<p>Need to dynamically insert a form here</p>

需要在此处动态插入表单

有没有AngularJS的方法可以做到这一点？

您可以使用

---

需要在此处动态插入表单

查看Angular UI的UI路由器

---

它扩展了对路由的支持，添加了对状态机和嵌套路由的支持，这些支持可以帮助您到达目的地。

有两种方法，一种是使用ng include，如上所述，确保您的模板位于srtipt标签中

<script type="text/ng-template" id="myTemp">
//your html

</script>

---

问题不在于更改路线，而在于更改模板

<div ng-include="myTemp"></div>

<div id="myDiv">

</div>

var myHtml="<div> hello dude <span ng-repeat="obj in objects"></span><div>"

var compiled=$compile(myHtml)($scope);
angular.element("#myDiv").append(compiled);