How do you use sce trustAsHtml string to replicate ng-bind-html-unsafe in Angular 1 2

Question

ng-bind-html-unsafe was removed in Angular 1 2  I m trying to implement something where I need to use ng-bind-html-unsafe  In the docs and on the github commit they say      ng-bind-html provides ng-html-bind-unsafe like behavior  innerHTML s the result without   sanitization  when bound to the result of  sce trustAsHtml string     How do you do this

User · Answer

var line     lt label onclick  alert 1   gt aaa lt  label gt     1  use filter  app filter  unsafe   function  sce    return  sce trustAsHtml        using  html     lt span ng-bind-html  line   unsafe  gt  lt  span gt     gt click  aaa  show alert box   2  use ngSanitize   safer  include angular-sanitize js   lt script src  bower components angular-sanitize angular-sanitize js  gt  lt  script gt    add ngSanitize in root angular app  var app   angular module  app     ngSanitize       using  html     lt span ng-bind-html  line  gt  lt  span gt     gt click  aaa  nothing happen

User · Answer

Filter  app filter  unsafe   function  sce    return  sce trustAsHtml        Usage   lt ANY ng-bind-html  value   unsafe  gt  lt  ANY gt

User · Answer

Simply creating a filter will do the trick   Answered for Angular 1 6    filter  trustHtml               sce           function  sce                return function value                    return  sce trustAs  html   value                                     And use this as follow in the html    lt h2 ng-bind-html  someScopeValue   trustHtml  gt  lt  h2 gt

User · Answer

my helpful code for others just one aspx to do text area post      lt    Page Language  C   AutoEventWireup  true  CodeBehind  WebForm1 aspx cs  Inherits  WebApplication45 WebForm1    gt    lt  DOCTYPE html gt       enter code here   lt html ng-app  htmldoc  xmlns  http   www w3 org 1999 xhtml  gt   lt head runat  server  gt       lt title gt  lt  title gt       lt script src  angular min js  gt  lt  script gt       lt script src  angular-sanitize min js  gt  lt  script gt       lt script gt          angular module  htmldoc     ngSanitize    controller  x   function   scope   sce                   scope htmlContent     lt script gt   function      location     http   moneycontrol com          lt   script gt  In last valid content                scope htmlContent                    scope withoutSanitize   function                      return  sce getTrustedHtml  scope htmlContent                               scope postMessage   function                      var ValidContent    sce trustAsHtml  scope htmlContent                      your ajax call here                                 lt  script gt   lt  head gt   lt body gt       lt form id  form1  runat  server  gt          Example to show posting valid content to server with two way binding          lt div ng-controller  x  gt               lt p ng-bind-html  htmlContent  gt  lt  p gt               lt textarea ng-model  htmlContent  ng-trim  false  gt  lt  textarea gt               lt button ng-click  postMessage    gt Send lt  button gt           lt  div gt       lt  form gt   lt  body gt   lt  html gt

User · Answer

scope trustAsHtml function scope        return  sce trustAsHtml scope      lt p class  card-text w-100  ng-bind-html  trustAsHtml note redoq csd product lead note   gt  lt  p gt

User · Answer

For Rails  at least in my case  if you are using the angularjs-rails gem  please remember to add the sanitize module      require angular     require angular-sanitize   And then load it up in your app     var myDummyApp   angular module  myDummyApp     ngSanitize       Then you can do the following   On the template    span  ng-bind-html   gt  phone with break x      And eventually    scope phone with break   function  x      if  x phone             return x phone     lt br gt          return

User · Answer

If you want the old directive back  you can add this to your app   Directive    directives directive  ngBindHtmlUnsafe      sce   function  sce       return           scope                ngBindHtmlUnsafe                          template    lt div ng-bind-html  trustedHtml  gt  lt  div gt            link  function  scope  iElm  iAttrs  controller                 scope updateView   function                      scope trustedHtml    sce trustAsHtml  scope ngBindHtmlUnsafe                               scope  watch  ngBindHtmlUnsafe   function newVal  oldVal                     scope updateView newVal                                           Usage   lt div ng-bind-html-unsafe  group description  gt  lt  div gt    Source - https   github com angular-ui bootstrap issues 813

User · Answer

That should be    lt div ng-bind-html  trustedHtml  gt  lt  div gt    plus in your controller    scope html     lt ul gt  lt li gt render me please lt  li gt  lt  ul gt     scope trustedHtml    sce trustAsHtml  scope html     instead of old syntax  where you could reference  scope html variable directly    lt div ng-bind-html-unsafe  html  gt  lt  div gt    As several commenters pointed out   sce has to be injected in the controller  otherwise you will get  sce undefined error    var myApp   angular module  myApp         myApp controller  MyController      sce   function  sce                your code

User · Answer

JavaScript   scope get pre   function x        return  sce trustAsHtml x        HTML   lt pre ng-bind-html  get pre html   gt  lt  pre gt

User · Answer

Personally I sanitize all my data with some PHP libraries before going into the database so there s no need for another XSS filter for me   From 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                                  To use    lt div ng-bind-html-unsafe  group description  gt  lt  div gt    To disable  sce   app config    sceProvider   function  sceProvider         sceProvider enabled false

[angularjs] How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

1. use filter

2. use ngSanitize : safer

Examples related to angularjs