AngularJS：ng-bind-html刪除樣式

Question

在我的應用程序中，我正在使用table和ng-repeat 。 我正在渲染我的數據，其中一列是在以下幫助下渲染的：

<div class="cell" data-ng-bind-html="article.Content">
</div>

但我有一個問題，如果我有以下內容：

<div class="page-wrap">123</div>

它打破了我的整個風格（ 因為頁面也有頁面包裝 ）。

渲染html是否真實，但沒有渲染樣式和CSS風格？ 如何？

喜歡：

<div>123</div>

Answer 1

我相信你所說的是article.Content實際上包含HTML，而Angular正在剝離所有的HTML標簽。

您的代碼接近於獲得您想要的內容，但您需要使用$ sce服務將內容中的HTML標記為“安全”。 一種簡單的方法是使用此過濾器。

app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });

然后使用此過濾器去除類：

app.filter('stripClasses', function() {
  return function(str) {
    return str.replace(/class=['"].*["']/, '');
  }
});

.replace（）函數從內容中刪除任何class="whatever" ，我認為這就是你想要的。

更新：同樣，這可以用於去除任何內聯樣式：

app.filter('stripStyles', function() {
  return function(str) {
    return str.replace(/style=['"].*["']/, '');
  }
});

（您需要將app.部分過濾器定義更改為適用於您的應用程序的任何內容。使用您用於.controller（）調用的任何前綴/方法。）

如果要刪除多個樣式或類，則應該使用正則表達式的非貪婪版本：

str.replace(/class=['"](.*?)["']/g, '')

然后你將你的data-ng-bind-html="article.Content"更改為：

<div class="cell" data-ng-bind-html="article.Content | stripClasses | trustAsHtml"></div>

或者，對於類和樣式刪除：

<div class="cell" data-ng-bind-html="article.Content | stripStyles | stripClasses | trustAsHtml"></div>

我為另一個答案做的Plunk顯示了如何使用trustAsHtml過濾器，並展示了如何在控制器中使用$ sce服務。