Angular - use template as container for multiple templates

Question

Here's a quick question:

Is it possible to have a template in which you have multiple templates and call the one you need, when you need it?

Let me explain this a bit better:

I have a modal that I call this way:

$scope.showErrorModal = ->
    errorModal = $ionicPopup.show(
      title: 'Issues list'
      scope: $scope
      templateUrl: './sections/modal/modal.tpl.html'
      buttons: [{text: 'Close',type: 'button-assertive'}
      ])
    errorModal.then (res) ->
      console.log 'tapped!', res
      return
    return

as you can see, i'm using an external template.

The problem is that this way i need to create different templates everytime my modal needs to change.

What i'd like to do (if possible), is being able to create various sub-templates inside modal.tpl.html and call them in the right modal.

Here's some example code:

modal.tpl.html:

<div id="error-template">
// here the error-modal stuff
</div>

<div id="success-template">
// here the success-modal stuff
</div>

and from the controller, call them like this, for example:

$scope.showErrorModal = ->
        errorModal = $ionicPopup.show(
          title: 'Issues list'
          scope: $scope
          templateUrl: './sections/modal/modal.tpl.html#error-template' //Just to make it clear that i want to use only one part of that file
          buttons: [{text: 'Close',type: 'button-assertive'}
          ])
        errorModal.then (res) ->
          console.log 'tapped!', res
          return
        return

Is this pure fiction, or it is possible? Are there any other solutions to solve this type of problems?

well if you want to conditionally render templates inside your "main template" you can just use either directives (my preferred solution) or use ng-include and set the url to the template. and the conditions could be set with the ng-if or ng-switch attributes — Jony-Y, Mar 02 '16 at 17:39

score 1 · Accepted Answer · answered Mar 02 '16 at 17:03

Other than reducing the number of network requests, I don't see any real benefit to doing what you mentioned in the question. You may want to use multiple modal directives (errorModal, successModel, etc..) anyway to better compartmentalize your code.

If you want to reduce network requests, there is a $templateCache service that enables you to preload your templates with the first request, in some way like this:

<script type="text/ng-template" id="templateId.html">
  <p>This is the content of the template</p>
</script>

You may also want to look at angular ui router which is an alternative router implementation that more easily allows nested and master templates.

Yeah, i am using both router and template cache already. It was just so that I have to write less files, that's it — Nick, Mar 02 '16 at 18:31

Angular - use template as container for multiple templates

1 Answers1