0

can transclude and templateUrl work together in a directive?

I'm trying to make a dynamic modal directive that supports html.

modal.js

'use strict';

myApp.directive('siteModal', function($http) {
    return {
        restrict: 'A',
        transclude: true,
        templateUrl: "./components/modal/modal.html",
    };
});

modal.html

<div class="site-modal">

    <div class="site-modal-content">

        <div class="site-modal-body">
            {{modalContent}}
        </div>

    </div>
    <div class="site-modal-overlay"></div>
</div>

Usage:

<div site-modal ng-transclude>
    Hello World <strong>and maybe some HTML too!</strong>
</div>
user3800799
  • 534
  • 1
  • 5
  • 18
  • you have `ng-transclude` in the wrong place. `ng-transclude` goes *inside the template*, as the marker for where the transcluded content should be inserted into the template. – Claies Jun 25 '16 at 04:55

1 Answers1

1

It is supposed to work together. You have just misplaced ng-transclude attribute.

<div class="site-modal">

    <div class="site-modal-content">

        <div class="site-modal-body">
            <p ng-transclude> </p>
        </div>

    </div>
    <div class="site-modal-overlay"></div>
</div>
Muthukannan Kanniappan
  • 2,080
  • 1
  • 16
  • 18