0

I'd would like to transclude content from a template url instead of from within the body of the directive tags.

Using a modal as an example, you could see the need to have the modal directive declaring a template url for the modal wrapper markup, however for the transcluded content instead of sourcing that content from within the directive tags (some modals may have extensive markup) I'd like to use a template url to provide the transluded content. Thus provided a much cleaner abstraction layer for the component.

i.e.

homeView.html

<my-modal transclude-content="profile"></my-modal>

modalDirective.js

app.directive('modal', function() {
  return {
    templateUrl: 'app/shared/modalView.html',

    // some nifty way to transclude content from say 'app/shared/partials/' + attr.transcludeContent + '.html

  };
});

modalView.html

<div class="modal">
  <div class="modal-controls">
    <span class="minimize">-</span>
    <span class="close">x</span>
  </div>
  <div class="modal-body" ng-transclude>
  </div>
</div>
micahblu
  • 4,924
  • 5
  • 27
  • 33
  • 1
    Look this answer http://stackoverflow.com/questions/14632260/can-you-change-templateurl-on-the-fly – Senthil Apr 07 '15 at 23:50
  • I believe that's the way to go – micahblu Apr 08 '15 at 02:25
  • Spoke too soon, the problem with that answer is that its essentially a way of accomplishing a dynamic templateUrl, whereas I need to pull content from two templateUrl's one for the directive shell and another to transclude content within that shell... Though this may be a point in the right direction towards a solution – micahblu Apr 08 '15 at 17:02

1 Answers1

0

The answer is simple!

Nest your directives!!

<modal-window>
   <user-profile></user-profile>
</modal-window>
micahblu
  • 4,924
  • 5
  • 27
  • 33