Question

我正在尝试使用Angular和UI Bootstrap动态加载模板，但我甚至无法知道如何操作。

这是我迄今为止的代码：

小提琴：https://jsfiddle.net/fwpcsfg7/8/

我想要的是拥有以下ng-repeat：

<div ng-app="MyApp" ng-controller="ExampleController as example">
  <!-- load a different template (partial) inside the modal depending on the value of item.type -->
  <div class="someClass" ng-repeat="item in example.items" ng-click="example.loadModal(item.templateName)">Modal {{item.type}}</div>
</div>

<!-- The modal that would change it's content depending on the item type-->
<div class="modal" ng-controller="ModalController as modal" ng-include src="example.modalTemplate+'.html'"></div>

<!-- Defining Angular cached partials -->
<script type="text/ng-template" id="modalType1.html">
  <input ng-model="item.name"></input>
</script>
<script type="text/ng-template" id="modalType2.html">
  <input ng-model="item.name"></input>
  <input ng-model="item.age"></input>
</script>
<script type="text/ng-template" id="modalType3.html">
  <input ng-model="item.name"></input>
  <input ng-model="item.name"></input>
</script>
<script type="text/ng-template" id="modalType4.html">
  <input ng-model="item.name"></input>
  <input ng-model="item.lastName"></input>
  <input ng-model="item.country"></input>
  <input ng-model="item.location"></input>
</script>

我想为每个item.type值显示一个包含不同内容的模式。如果你能给我一个基本的小提琴，我会很高兴。

真实案例更复杂，所以我需要将模态的内容作为模板加载（可能更容易为每个item.type制作模态？）

编辑：我不知道如何解决的问题之一是：如果我在其他完全不同的控制器上，如何访问item属性？

Answer 1

可能会有所帮助how to append a html template to a div/directive on click with angular js?

有一些X变量来指示您要加载的模板。并使用ng-include和src =“X”

使用动态内容

1 个答案: