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