AngularJS: ng-bind删除样式

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，而这个角度正在去掉所有的HTML标记。

您的代码几乎可以得到您想要的内容，但是您需要使用$sce服务将其中的内容标记为“安全”。一个简单的方法是使用这个过滤器。

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>

我为另一个答案做的这个普伦克展示了如何使用trustAsHtml过滤器，以及如何在控制器内使用$sce服务。