HTML 编码的字符串在 AngularJS 中无法正确翻译

Question

我有一个 HTML 编码的字符串，如下所示：

Sign up and get &lt;span class=&quot;strong&quot;&gt;Something for     FREE!&lt;/span&gt;

当我像这样在我的模板中使用 ngSanitize 和 ng-bind-html 时：

<p ng-bind-html="someText"></p>

我取回 HTML 解码后的字符串：

Sign up and get <span class="strong">Something for Free!</span>

但它确实在浏览器中显示 HTML 解码字符串，而不是正确呈现 HTML。

如何让它在 DOM 中呈现正确的 HTML？

Answer 1

您可以先解码 html 字符串。这是一个有效的 plunker 示例。

angular.module('app', ['ngSanitize'])
  .controller('ctrl', ['$scope', '$sanitize', function($scope, $sanitize){
    $scope.someText = htmlDecode("Sign up and get &lt;span class=&quot;strong&quot;&gt;Something for     FREE!&lt;/span&gt;");

    function htmlDecode(input){ 
      var e = document.createElement('div');
      e.innerHTML = input;
      return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }
}]);

** 解码函数取自 this 答案。

Answer 2

这是一个很好的答案。在此基础上，您可以将其作为过滤器重新使用：

angular.module('app', ['ngSanitize'])
  .filter('decoded', [ '$sanitize', function($sanitize) {
    function htmlDecode(input) {
      var e = document.createElement('div');
      e.innerHTML = input;
      return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
    }

    return function(input) {
      return htmlDecode(input);
    }
  }])

然后像这样使用它：

<p ng-bind-html="scope_with_data | decoded"></p>

当您拥有第 3 方脚本（比方说，图片库）并且您必须通过 html data-* 属性将数据传递给它时，这将变得非常有用。唯一的方法是使用过滤器。

<div data-title="scoped_data.title | decoded "></div>

希望这对某人有所帮助:)

HTML 编码的字符串在 AngularJS 中无法正确翻译

HTML encoded String not translating correctly in AngularJS

angularjs

ngsanitize