angularjs - How do I specify the parent I want to transclude a directive to? -

i have lightbox directive when transcludes, injects in content. technically, wherever put actual call directive. essentially, need transclude body backdrop can cover entire page viewport, , centers viewport , not container transcluding right now.

the directive written way:

(function() {     'use strict';      angular         .module('app.core')         .directive('lightboxdirective', lightboxdirective);          function lightboxdirective() {             return {               restrict: 'e',               transclude: true,               scope: {},               template: '<section class="md-lightbox" ng-transclude></section>',             };         }  })(); 

the lightbox located in page way:

<div id="scala-media-media" class="page-layout">      <div class="center" flex>           <div class="header">                <img ng-src="{{vm.media.images[0].url}}" ng-click="showlightbox = true">           </div>           <div class="content">                ... page content here ...           </div>      </div> </div>  <lightbox-directive class="angular-lightbox" ng-class="{ removed : !showlightbox }">       ... code lightbox content (which works fine way) ... </lightbox-directive> 

at first thought i'd specify parent in $mddialog (angular material) parent: angular.element($document.body), didn't work out. parent not recognized callback assume.

notice in image injected. right place it! what's point of using directive if can place code there , same thing without directive? right?

here screenshot of happening. notice backdrop , centering issue having on left side, opposed desire in right side dialog.

i using angular lightbox found in codepen

update

i moved lightbox own template file, not feel guilty using code directly on page makes use of directive redundant. , restructured directive shows below. rendering on runtime still problem. template injects called. if declare body parent append to! lol

new directive:

function lightboxdirective() {     return {         restrict: 'e',         templateurl: function(elem,attrs) {             return attrs.templateurl || 'app/main/pages/scala-media/views/lightbox-template.html'         }     }; } 

thanks in advance!

you can make element reposition before closing body tag with

.directive("lightboxdirective", function() {   return {     restrict: 'e',     transclude: true,     scope: {},     template: '<section class="md-lightbox" ng-transclude></section>',     link: function(scope, elem) {       angular.element(document).find("body").append(elem);     }   }; });