¿Cómo se usa $sce.trustAsHtml(string) para replicar ng-bind-html-unsafe en Angular 1.2+?
ng-bind-html-unsafe
fue 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?
Filtrar
app.filter('unsafe', function($sce) { return $sce.trustAsHtml; });
Uso
<ANY ng-bind-html="value | unsafe"></ANY>
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.html
a la variable directamente:
<div ng-bind-html-unsafe="html"></div>
Como señalaron varios comentaristas, $sce
debe inyectarse en el controlador; de lo contrario, obtendrá $sce undefined
un error.
var myApp = angular.module('myApp',[]);
myApp.controller('MyController', ['$sce', function($sce) {
// ... [your code]
}]);
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 ngSanitize
en la aplicación angular raíz
var app = angular.module("app", ["ngSanitize"]);
usando (html):
<span ng-bind-html="line"></span>
==>click `aaa` nothing happen