With Ng-Bind-Html-Unsafe Removed, How to Inject Html

With ng-bind-html-unsafe removed, how do I inject HTML?

1. You need to make sure that sanitize.js is loaded. For example, load it from https://ajax.googleapis.com/ajax/libs/angularjs/[LAST_VERSION]/angular-sanitize.min.js
2. you need to include ngSanitize module on your app
   eg: var app = angular.module('myApp', ['ngSanitize']);
3. you just need to bind with ng-bind-html the original html content. No need to do anything else in your controller. The parsing and conversion is automatically done by the ngBindHtml directive. (Read the How does it work section on this: $sce). So, in your case <div ng-bind-html="preview_data.preview.embed.html"></div> would do the work.

ng-bind-html and unsafe not working

Make use of $sce service. Inject $sce to your controller & then use trustAsHtml method. In controller add code as:

$scope.desc = $sce.trustAsHtml($scope.Description);

Where $scope.Description is a string containing html tags

Then, bind on template with ng-bind-html :

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

ng-bind-html-unsafe not working

Since Angular 1.2.X ng-bind-html-unsafe has been deprecated, do use ng-bind-html

ng-bind-html="value | unsafe | noHTML | newlines"

ng-bind-html-unsafe' doesn't display anything

You are using Angular 1.6.x and ng-bind-html-unsafe has been deprecated long ago. You can use:ng-bind-html

<div ng-bind-html="eventObj.Name"></div>

Note: In your controller, inject the $sce,

Edit 1:
Add this method inside your controller:

Filter:

angular.module('myApp')
.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
         var doc = new DOMParser().parseFromString(text, "text/html");
         var   rval= doc.documentElement.textContent;
        console.log(rval)
        return $sce.trustAsHtml(rval)
    };
}]);

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="eventObj in card" class="event">
  Subject: <span ng-bind-html="eventObj.Name|to_trusted"></span>
  <br /><br />  
  Venue:<span>{{eventObj.Venue}}</span>
  <br /><br />  
  Date:<span>{{eventObj.StartDate | date:'fullDate'}}</span>
  <br /><br />
  <button ng-click="add(eventObj.EventID)">Add to Outlook</button>
  </div>
</div>

Working Demo: https://plnkr.co/edit/sFhaSJ2Ir9PYUObdtcnj?p=preview

Angularjs ng-bind-html-unsafe replacement

Well, it's quite simple to just create your own directive, here is an example.

Directive:

app.directive('bindHtmlUnsafe', function( $compile ) {
    return function( $scope, $element, $attrs ) {

        var compile = function( newHTML ) { // Create re-useable compile function
            newHTML = $compile(newHTML)($scope); // Compile html
            $element.html('').append(newHTML); // Clear and append it
        };

        var htmlName = $attrs.bindHtmlUnsafe; // Get the name of the variable 
                                              // Where the HTML is stored

        $scope.$watch(htmlName, function( newHTML ) { // Watch for changes to 
                                                      // the HTML
            if(!newHTML) return;
            compile(newHTML);   // Compile it
        });

    };
});

Usage:

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

Demo: http://jsfiddle.net/cC5VZ/2

How use ng-bind-html-unsafe in AngularJS?

In jsfiddle inside an question is using angular 1.1 in which ng-bind-html-unsafe is working.

But currently angular has deprecated ng-bind-html-unsafe from latest version, instead you need to use ng-bind-html then sanitize that url from the angular filter using $sce service and $sce.trustedAsHtml()

Filter

app.filter("sanitize", ['$sce', function($sce) {
        return function(htmlCode){
            return $sce.trustAsHtml(htmlCode);
        }
}]);

HTML

  <div ng-repeat="d in Data">
       <div class='content'>
           <div ng-bind-html="d.body | sanitize">
                 <p>{{d.body}}</p>
           </div>
        </div>
  </div>

For more info refer this SO answer

ng-bind-html not removing &

Try creating a filter, like so...

var app = angular.module("teen.myapp", ['ngRoute','slickCarousel','ngSanitize','ngMessages','mm.foundation','ngResource']);

app.filter("cleanUp", ['$sce', function($sce) {
  return function(textToCleanUp){
    return $sce.trustAsHtml(textToCleanUp);
  }
}]);

Then use it as so:

<span ng-bind-html="items.text | linky:'blank_' | cleanUp" />

ng-bind-html doesn't connect different things in once (not even with $sce.trustAsHtml() )

You can't use ng-bind and ng-bind-html on the same element, and you can't use {{}} in either one of them. It's not necessary to concatenate the <small> tag inside the ng-bind-html, it should be in the template itself. And you have some syntax error nested-quotes issues in your ng-bind-html clause.

It's not clear to me from your description which of test.name, TEST_BTN or BTN_ADD you actually intend to use; I'm going to assume you really want test.name here but if one of those other variables contains the HTML you're trying to embed, just substitute its name in place of test.name:

<div ng-if="test.isSomething">
  <small ng-bind-html="test.name | translate"></small>
</div>

---

Related Topics