在AngularJs網頁中顯示html內容的最佳方式

在AngularJs應用程序的網頁中顯示html內容的最佳解決方案是什麼？我必須通過發佈請求獲取內容，所以我不能使用帶有「src」屬性的「iframe」標籤來加載它。我想剝離一些html標籤，如「html」「head」「body」，然後將內容顯示爲「div」標籤。但我不知道如何從字符串中刪除一些html標籤。在AngularJs網頁中顯示html內容的最佳方式

有什麼建議嗎？

謝謝你這樣做（沒有操縱從控制器DOM）

來源

2015-05-24 Andrea Borgogelli Avveduti

https://docs.angularjs.org/api/ng/directive/ngBindHtml –

它是靜態內容嗎？ – charlietfl

是的，這是一個靜態內容獲取的帖子請求 –

一種方法是創建一個指令，然後使用angular.element（）。追加（）注入POST調用的HTML響應。

HTML

<remote-content></remote-content>

該指令將替換元件與所檢索的HTML

注意：這是劃線的情況下，以匹配該指令名稱的駝峯，remoteContent - >遠程內容

DIRECTIVE

app.directive('remoteContent', function($http) { 
    return { 
    restrict: 'E', 
    link: function(scope, element, attrs) { 

     $http.post('/endpoint', {format:'html'}). 
     success(function(html) { 

      // remove wrapping html and body tags etc if necessary 

      angular.element(element).append(html); 

     }). 
     error(function(data, status, headers, config) { 

      alert("Could not fetch remote HTML"); 

     }); 

    } 
    }; 
});

這是一個Plunkr，它顯示了沒有$ http.post調用的DOM HTML注入。

由於HTML響應只是一個字符串，你可以使用replace找到包裝標籤並刪除它們：

var content_html = html.replace(/<\/?(html|body)>/g, '');

但如果<head>包含腳本標籤和諸如此類的東西，你需要使用字符串找到<body>標籤，並獲取其中的內容。

來源

2015-05-25 16:41:38 Brian

嗨，布賴恩，我已經嘗試過類似的東西，但我怎樣才能去掉所有樣式表標籤和其他垃圾？我認爲「字符串替換」不是正確的方式，「正則表達式」太複雜了。你怎麼看待這件事？你知道我是否可以將iframe標籤與ng-src和ng-bind-html指令一起使用？ –

取決於你有多少「其他垃圾」。你可以在''這個字符串中找到位置，''的位置，然後用一些簡單的數學方法就可以得到'.substring（）'用來得到''的innerHTML的索引。我不確定我從來沒有嘗試過的iframe。你是否需要任何樣式或js來呈現內容？ – Brian

我不需要js來渲染內容，但需要css！ –

在AngularJs網頁中顯示html內容的最佳方式

回答

相關問題