在uibModal中顯示從服務器返回的iframe中的html內容

我嘗試了很多，但我不知道它爲什麼不起作用。這裏是我的調式結構：在uibModal中顯示從服務器返回的iframe中的html內容

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

我得到的HTML內容從服務器顯示。它處理如下：

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

我試圖在打開模式時在iframe中顯示htmlText。我是模式的uisng $ uibModal服務。當我用ng-bind-html而不是iframe使用div元素時，一切正常。但我想在iframe中顯示數據。請提出一個解決方案，我已經嘗試了一切，並浪費了兩天時間，但無法使其工作。提前致謝。

我也試過指令的方法，但它也不起作用。任何人都可以告訴我我做錯了什麼？

.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>

我得到的iframe如下：

來源

2016-08-16 Swap

您是否試圖與srcdoc = 「{{}的htmlText}」不認爲將角處理srcdoc屬性來解析值。也親自做了一個指令，將文本加載到iframe元素相信我只是使用iframe元素中的文檔，我將該指令應用於 – shaunhusain

@shaunhusain您可以舉個例子嗎？ – Swap

我找到了答案。這是

.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>

來源

2016-08-16 20:21:03 Swap

在uibModal中顯示從服務器返回的iframe中的html內容

回答

相關問題