uibModalのiframeでサーバーから返されたHTMLコンテンツを表示する

Question

私はたくさん試しましたが、なぜ動作しないのか分かりません。

<div id="modalID"> 
    <div class="modal-header"></div> 
    <div class="modal-body"> 
    <iframe srcdoc="htmlText"> 
    </div> 
</div> 

私のモーダル構造は、サーバーから表示されるようになっています。

controller('ModalCtrl',function(text){ 
    $scope.htmlText=$sce.trustAsHtml(text); 
} 

は、私は、モーダルを開いたときにiframe内のhtmlTextを表示しようとしている：それは以下のように処理されます。私はモーダルのために$ uibModalサービスを利用しています。 iframeの代わりにng-bind-htmlでdiv要素を使用すると、すべてうまく動作します。しかし、私はiframeにデータを表示したい。 解決策を提案してください。私はすべてを試してみましたが、2日は無駄でしたが、動作させることはできませんでした。前もって感謝します。

私もディレクティブアプローチを試みましたが、動作しません。誰でも私が間違っていることを教えてもらえますか？

.directive("previewHTML", function() { 
    function link(scope, element) { 
     var iframe = document.createElement('iframe'); 
     var element0 = element[0]; 
     element0.appendChild(iframe); 
     var body = iframe.contentDocument.body; 

     scope.$watch('content', function() { 
      body.innerHTML = scope.content; 
     }); 
    } 

    return { 
     link: link, 
     restrict: 'E', 
     scope: { 
      content: '=' 
     } 
    }; 
}); 


<div class="modal-body"> 
    <preview-html content="htmlText"></preview-html> 
</div> 

次のように私はインラインフレームを取得しています：

Answer 1

私は答えを見つけました。ここでは、それは

.directive("previewHTML", function() { 
    return { 
     restrict: 'E', 
     require: '?ngModel', 
     replace: true, 
     transclude: true, 
     template: '<iframe height="100%" width="100%" frameborder="0"></iframe>', 
     link: function (scope, element, attrs) { 
      element.attr('srcdoc', attrs.iframeSrc); 
     } 
    }; 
}) 

HTMLマークアップ

<div class="modal-body text-left"> 
    <preview-html data-iframe-src="{{htmlText}}"></preview-html> 
</div>