ng-bind-html-unsafe在Angular 1.2中被移除

我试图实现的东西,我需要使用ng-bind-html-不安全。在文档和github提交中,他们说:

ng-bind-html提供了ng-html-bind-不安全的行为(innerHTML的结果没有 当绑定到$sce.trustAsHtml(string)的结果时,sanitization)。

怎么做呢?


当前回答

对于Rails(至少在我的情况下),如果你正在使用angularjs-rails gem,请记得添加sanitize模块

//= require angular
//= require angular-sanitize

然后在你的应用程序中加载它…

var myDummyApp = angular.module('myDummyApp', ['ngSanitize']);

然后您可以执行以下操作:

在模板中:

%span{"ng-bind-html"=>"phone_with_break(x)"}

最后:

$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}

其他回答

简单地创建一个过滤器就可以了。(适用于Angular 1.6)

.filter('trustHtml', [
        '$sce',
        function($sce) {
            return function(value) {
                return $sce.trustAs('html', value);
            }
        }
    ]);

并在html中按如下方式使用。

<h2 ng-bind-html="someScopeValue | trustHtml"></h2>

var line = “<label onclick=”alert(1)“>aaa”</label>;

1. 使用过滤器

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

使用(html):

<span ng-bind-html="line | unsafe"></span>
==>click `aaa` show alert box

2. 使用ngSanitize:更安全

包括angular-sanitize.js

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

在angular的根应用中添加ngSanitize

var app = angular.module("app", ["ngSanitize"]);

使用(html):

<span ng-bind-html="line"></span>
==>click `aaa` nothing happen

过滤器

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

使用

<ANY ng-bind-html="value | unsafe"></ANY>

对于Rails(至少在我的情况下),如果你正在使用angularjs-rails gem,请记得添加sanitize模块

//= require angular
//= require angular-sanitize

然后在你的应用程序中加载它…

var myDummyApp = angular.module('myDummyApp', ['ngSanitize']);

然后您可以执行以下操作:

在模板中:

%span{"ng-bind-html"=>"phone_with_break(x)"}

最后:

$scope.phone_with_break = function (x) {
  if (x.phone != "") {
   return x.phone + "<br>";
  }
  return '';
}

JavaScript

$scope.get_pre = function(x) {
    return $sce.trustAsHtml(x);
};

HTML

<pre ng-bind-html="get_pre(html)"></pre>