2

次のような HTML エンコードされた文字列があります。

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

テンプレートで 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 をレンダリングするにはどうすればよいですか?

4

2 に答える 2

1

最初に html 文字列をデコードできます。これが実際のプランカーの例です。

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;
    }
}]);

**この回答から取得したデコード機能。

于 2015-07-14T17:18:56.167 に答える
1

それは素晴らしい答えです。それに基づいて、代わりにフィルターとして大幅に再利用できます。

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>

これは、サードパーティのスクリプト (画像ギャラリーなど) があり、html data-* 属性でデータを渡す必要がある場合に非常に便利です。それを行う唯一の方法は、フィルターを使用することです。

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

これが誰かを助けることを願っています:)

于 2016-08-04T13:46:41.130 に答える