Question

我正在开发一个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这样做？

Answer 1

您可以使用ngInclude

<p ng-include="step1.html">Need to dynamically insert a form here</p>

Answer 2

如上所述，有两种方法可以使用ng-include，确保你的模板是srtipt标签，即

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

</script>

并在ng include

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

或者如果你在js变量中有html硬编码并想要附加到你知道其id的div，那么以下内容将会：

<div id="myDiv">

</div>

，你的变量是

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

然后在这种情况下你需要编译这个html，以便在这种情况下ng-repeat的angular指令可以起作用。

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

Answer 3

查看Angular-UI的ui-router。

https://github.com/angular-ui/ui-router

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

有没有办法动态地将html表单插入AngularJS中的div？

3 个答案: