¿Cómo se usa $sce.trustAsHtml(string) para replicar ng-bind-html-unsafe en Angular 1.2+?

Resuelto timhaak asked hace 11 años • 10 respuestas

ng-bind-html-unsafefue eliminado en Angular 1.2

Estoy intentando implementar algo donde necesito usar ng-bind-html-unsafe. En los documentos y en el compromiso de github dicen:

ng-bind-html proporciona un comportamiento similar a ng-html-bind-unsafe (innerHTML es el resultado sin desinfección) cuando se vincula al resultado de $sce.trustAsHtml(string).

¿Cómo haces esto?

timhaak avatar Aug 20 '13 23:08 timhaak
Aceptado

Filtrar

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

Uso

<ANY ng-bind-html="value | unsafe"></ANY>
Chris avatar Oct 31 '2013 11:10 Chris

Eso debería ser:

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

además en tu controlador:

$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);

en lugar de la sintaxis antigua, donde se podía hacer referencia $scope.htmla la variable directamente:

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

Como señalaron varios comentaristas, $scedebe inyectarse en el controlador; de lo contrario, obtendrá $sce undefinedun error.

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

 myApp.controller('MyController', ['$sce', function($sce) {
    // ... [your code]
 }]);
Nenad avatar Aug 20 '2013 18:08 Nenad

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

1. usar filtro

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

usando (html):

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

2. use ngSanitize: más seguro

incluirangular-sanitize.js

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

agregar ngSanitizeen la aplicación angular raíz

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

usando (html):

<span ng-bind-html="line"></span>
==>click `aaa` nothing happen
nguyên avatar Mar 05 '2016 12:03 nguyên