Como você usa $ sce.trustAsHtml (string) para replicar ng-bind-html-unsafe no Angular 1.2+

ng-bind-html-unsafe foi removido em Angular 1.2

Estou tentando implementar algo em que preciso usar o ng-bind-html-unsafe . Nos documentos e no commit do github eles dizem:

O ng-bind-html fornece um comportamento semelhante ao ng-html-bind-unsafe (innerHTML é o resultado sem sanitização) quando ligado ao resultado de $ sce.trustAsHtml (string).

Como você faz isso?

Isso deveria ser:

 

mais em seu controlador:

 $scope.html = '
  • render me please
'; $scope.trustedHtml = $sce.trustAsHtml($scope.html);

em vez da syntax antiga, onde você poderia referenciar diretamente a variável $scope.html :

 

Como vários comentaristas apontaram, $sce tem que ser injetado no controlador, senão você receberá $sce undefined erro $sce undefined .

  var myApp = angular.module('myApp',[]); myApp.controller('MyController', ['$sce', function($sce) { // ... [your code] }]); 

Filtro

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

Uso

  

Pessoalmente, eu limpo todos os meus dados com algumas bibliotecas PHP antes de entrar no database, então não há necessidade de outro filtro XSS para mim.

De AngularJS 1.0.8

 directives.directive('ngBindHtmlUnsafe', [function() { return function(scope, element, attr) { element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe); scope.$watch(attr.ngBindHtmlUnsafe, function ngBindHtmlUnsafeWatchAction(value) { element.html(value || ''); }); } }]); 

Usar:

 

Para desabilitar $sce :

 app.config(['$sceProvider', function($sceProvider) { $sceProvider.enabled(false); }]); 

var line = "";

1. use filtro

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

usando (html):

  ==>click `aaa` show alert box 

2. use ngSanitize: mais seguro

include angular-sanitize.js

  

adicionar ngSanitize no aplicativo angular de raiz

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

usando (html):

  ==>click `aaa` nothing happen 

Simplesmente criar um filtro fará o truque. (Respondido por Angular 1.6)

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

E use isso como segue no html.

 

Se você quiser a diretiva antiga de volta, poderá adicionar isso ao seu aplicativo:

Directiva:

 directives.directive('ngBindHtmlUnsafe', ['$sce', function($sce){ return { scope: { ngBindHtmlUnsafe: '=', }, template: "
", link: function($scope, iElm, iAttrs, controller) { $scope.updateView = function() { $scope.trustedHtml = $sce.trustAsHtml($scope.ngBindHtmlUnsafe); } $scope.$watch('ngBindHtmlUnsafe', function(newVal, oldVal) { $scope.updateView(newVal); }); } }; }]);

Uso

 

Fonte – https://github.com/angular-ui/bootstrap/issues/813

JavaScript

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

HTML

 

Para Rails (pelo menos no meu caso) se você estiver usando a gem angularjs-rails , lembre-se de adicionar o módulo sanitize

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

E, em seguida, carregue-o no seu aplicativo …

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

Então você pode fazer o seguinte:

No modelo:

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

E eventualmente:

 $scope.phone_with_break = function (x) { if (x.phone != "") { return x.phone + "
"; } return ''; }
 my helpful code for others(just one aspx to do text area post):: < %@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication45.WebForm1" %> < !DOCTYPE html> enter code here         
Example to show posting valid content to server with two way binding