825

AngularJS コントローラーでHTMLフラグメントを作成し、この HTML をビューに表示することは可能ですか?

これは、一貫性のない JSON BLOB をid: valueペアのネストされたリストに変換する必要があるためです。したがって、コントローラーでHTMLが作成され、それを表示しようとしています。

モデル プロパティを作成しましたが、 HTMLを印刷するだけでビューにレンダリングできません。

アップデート

問題は、作成された HTML を引用符内の文字列として角度付きでレンダリングすることから発生するようです。これを回避する方法を見つけようとします。

コントローラーの例:

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';
}

例のビュー:

<div ng:bind="customHtml"></div>

与える：

<div>
    "<ul><li>render me please</li></ul>"
</div>
4

17 に答える 17

1142

Angular 1.x の場合ng-bind-html、HTML で使用します。

<div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>

この時点でattempting to use an unsafe value in a safe contextエラーが発生するため、ngSanitizeまたは$ sce を使用して解決する必要があります。

$sce

コントローラーで使用$sce.trustAsHtml()して、html 文字列を変換します。

 $scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml(someHtmlVar);

ngサニタイズ

2 つのステップがあります。

  1. angular-sanitize.min.js リソースを含めます。

    <script src="lib/angular/angular-sanitize.min.js"></script>

  2. js ファイル (コントローラーまたは通常は app.js) に ngSanitize を含めます。

    angular.module('myApp', ['myApp.filters', 'myApp.services', 
    'myApp.directives', 'ngSanitize'])
于 2012-06-10T19:39:07.937 に答える
315

次のようにフィルターを作成することもできます。

var app = angular.module("demoApp", ['ngResource']);

app.filter("trust", ['$sce', function($sce) {
  return function(htmlCode){
    return $sce.trustAsHtml(htmlCode);
  }
}]);

次に、ビューで

<div ng-bind-html="trusted_html_variable | trust"></div>

注: このフィルターは、渡されたすべての html を信頼し、ユーザー入力を伴う変数が渡された場合、XSS の脆弱性を示す可能性があります。

于 2014-08-26T18:52:15.520 に答える
124

Angular JS はタグ内に HTML を表示します

上記のリンクで提供されている解決策は私にとってはうまくいきましたが、このスレッドのオプションはどれもうまくいきませんでした。AngularJS バージョン 1.2.9 で同じことを探している人向け

ここにコピーがあります：

わかりました、これに対する解決策を見つけました:

JS:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>

編集：

セットアップは次のとおりです。

JS ファイル:

angular.module('MyModule').controller('MyController', ['$scope', '$http', '$sce',
    function ($scope, $http, $sce) {
        $scope.renderHtml = function (htmlCode) {
            return $sce.trustAsHtml(htmlCode);
        };

        $scope.body = '<div style="width:200px; height:200px; border:1px solid blue;"></div>'; 

    }]);

HTML ファイル:

<div ng-controller="MyController">
    <div ng-bind-html="renderHtml(body)"></div>
</div>
于 2014-03-25T16:25:10.573 に答える
66

幸いなことに、このエラー メッセージを回避するために、手の込んだフィルターや安全でないメソッドは必要ありません。これは、意図した安全な方法で HTML マークアップをビューに適切に出力するための完全な実装です。

Angular の後にサニタイズ モジュールを含める必要があります。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-sanitize.js"></script>

次に、モジュールをロードする必要があります。

angular.module('app', [
  'ngSanitize'
]);

これにより、コントローラー、ディレクティブなどからの文字列にマークアップを含めることができます。

scope.message = "<strong>42</strong> is the <em>answer</em>.";

最後に、テンプレートでは、次のように出力する必要があります。

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

期待される出力が生成されます: 42が答えです。

于 2014-10-16T18:32:13.453 に答える
63

私は今日試しましたが、私が見つけた唯一の方法はこれでした

<div ng-bind-html-unsafe="expression"></div>

于 2012-07-24T22:49:49.293 に答える
52

ng-bind-html-unsafe動作しなくなりました。

これが最短の方法です：

フィルターを作成します。

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

そしてあなたの見解では：

<div ng-bind-html="customHtml | unsafe"></div>

ngSanitizePSこの方法では、モジュールを含める必要はありません。

于 2015-08-23T02:45:58.913 に答える
9

ng-sanitize を使用しても、html に ng-click を追加できないことがわかりました。

これを解決するために、ディレクティブを追加しました。このような：

app.directive('htmldiv', function($compile, $parse) {
return {
  restrict: 'E',
  link: function(scope, element, attr) {
    scope.$watch(attr.content, function() {
      element.html($parse(attr.content)(scope));
      $compile(element.contents())(scope);
    }, true);
  }
}
});

これが HTML です。

<htmldiv content="theContent"></htmldiv>

幸運を。

于 2014-09-22T21:34:09.683 に答える
4

スコープ属性を使用することを除いて、blrbr と非常によく似た別のソリューションは次のとおりです。

angular.module('app')
.directive('renderHtml', ['$compile', function ($compile) {
    return {
      restrict: 'E',
      scope: {
        html: '='
      },
      link: function postLink(scope, element, attrs) {

          function appendHtml() {
              if(scope.html) {
                  var newElement = angular.element(scope.html);
                  $compile(newElement)(scope);
                  element.append(newElement);
              }
          }

          scope.$watch(function() { return scope.html }, appendHtml);
      }
    };
  }]);

その後

<render-html html="htmlAsString"></render-html>

element.append()と置き換えることができることに注意してくださいelement.replaceWith()

于 2014-10-01T15:12:26.647 に答える
3

ng-includeも使用できます。

<div class="col-sm-9 TabContent_container" ng-include="template/custom.html">
</div>

「ng-show」を使用して、このテンプレート データを非表示にできます。

于 2014-10-17T06:32:39.323 に答える
1

使用する

<div ng-bind-html="customHtml"></div>

と

angular.module('MyApp', ['ngSanitize']);

angular-sanitize.jsそのためには、たとえば、html ファイルにを含める必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
于 2016-10-22T23:51:34.130 に答える