用动态内容加载Angular的UI Bootstrap模式

Question

I'm trying to make a modal dynamically load a template with Angular and UI Bootstrap, but I can't even figure how to do it.

This is the code I've got this far:

Fiddle : https://jsfiddle.net/fwpcsfg7/8/

What I want is having the following 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>

I'd like to show a modal with different content for each item.type value. I'd love if you could give me a basic fiddle.

The real life case is more complex, so I need to load the modal's content as a template (maybe is easier to make a modal for each item.type ?)

Edit: One of the problems I don't know how to solve is: How do I access the item properties if I'm on other totally different controller?

Answer 1

May be it will be helpful how to append a html template to a div/directive on click with angular js?

Have some X variable to indicate what template you want to load. And use ng-include with src="X"