ディレクティブを継承する親を指定するにはどうすればよいですか？

Question

私はlightboxディレクティブを持っています。トランスライトすると、コンテンツに挿入されます。技術的には、指示の実際の呼び出しをどこに置いても。しかし、本質的には、私は体に転写して、背景がページビューポート全体をカバーできるようにする必要があり、ビューポートを中心にして、コンテナが現在はトランスコードされていないようにします。

ディレクティブがこのように書かれている：

(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>', 
      }; 
     } 

})(); 

ライトボックスは、ページ内にこのように配置されています。

<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"> 
       ... the page content here ... 
      </div> 
    </div> 
</div> 

<lightbox-directive class="angular-lightbox" ng-class="{ removed : !showLightBox }"> 
     ... the code for my lightbox content (which works fine by the way) ... 
</lightbox-directive> 

最初に私は私が通常行うように私は親を指定しようと思いました$ mdDialog（角材）にparent: angular.element($document.body),と表示されていましたが、うまくいきませんでした。 parentは私が想定している認識されたコールバックではありません。

注射された画像に注意してください。私はそれを置きます右！もし私がそこにコードを置くことができ、その指示なしで同じことをするなら、ディレクティブを使用するポイントは何ですか？右？

ここには何が起こっているかのスクリーンショットがあります。右の方にダイアログで希望するものとは対照的に、私が左に持っている背景とセンタリングの問題に注目してください。

私は、上のコードを直接使用するための罪悪感を感じるしないように、私は、独自のテンプレートファイルにライトボックスを移動し、このCODEPEN

UPDATE

で見つかったこの角度をライトボックスを使用していますページはディレクティブを冗長に使用します。私の指示を再構成し、以下に示すようにしました。しかし、実行時のレンダリングはまだ問題です。テンプレートは、呼び出された場所に挿入します。今私はそれを追加するための親として体を宣言することができた！笑

新しいディレクティブ：事前に

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

ありがとう！

Answer 1

あなたはちょうどあなたがにリンクされCodePenのデモは `セクションと呼ばれるスタイルを持っているので、私はノードの位置が問題だとは思わない、と述べた

.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); 
    } 
    }; 
});