10

I used to be able to use ng-bind-html-unsafe to output unsanitized code (because sanitization happens serverside).

But now that option is gone? I know I can use $sce.trustAsHtml but adding that to the JavaScript all over the place is a huge pain when unsafe was so easy to use.

How do I get unsafe back?

4 Answers 4

23

Simpler again.

App.filter('unsafe', ['$sce', function ($sce) {
    return function (val) {
        return $sce.trustAsHtml(val);
    };
}]);

Usage:

<any ng-bind-html="content | unsafe"></any>

For more on html binding check the docs here.

Just a warning: make sure you actually trust the html, or you could be opening a hole in your sites security.

4
  • 1
    Worked fine with ng-bind-html but not with <p>{{ … }}</p> for me.
    – Henrik N
    Jun 13, 2014 at 15:56
  • Thanks @HenrikN you are correct. {{ ... }} will only print out the text of the content. I have updated the answer. Jun 14, 2014 at 2:41
  • @J-Dizzle That is pretty similar. I guess he got their first, though it is a pretty common and well known pattern. Thanks for the notice. Nov 6, 2014 at 3:09
  • So simple. So elegant. So beautiful. Dec 9, 2014 at 7:40
18

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

6
  • Thanks! Why do you clear and append it instead of just setting it with .html()?
    – Harry
    Sep 22, 2013 at 6:30
  • Because if you use html(); it end's up like this [object HTMLHeadingElement] and I also prefer to append anyway
    – iConnor
    Sep 22, 2013 at 14:55
  • it doesn't for me. Appending it is slower AFAIK, I changed it to just use html()
    – Harry
    Sep 22, 2013 at 18:42
  • 3
    Seems kinda ridiculous they would remove useful functionality and force people to write their own directives for it.
    – CorayThan
    Dec 4, 2013 at 22:44
  • @CorayThan That's angular for you.
    – iConnor
    Apr 14, 2014 at 14:08
1

Simplest way, without $sce:

module.directive('html', function() {
    function link(scope, element, attrs) {

        var update = function() {
            element.html(scope.html);
        }

        attrs.$observe('html', function(value) {
            update();
        });
    }

    return {
        link: link,
        scope:  {
            html:   '='
        }
    };
});

How to use:

<div html="angular.variable"></div>
0
0

I would strongly recommend checking out this SIMPLE JSFiddle example. Was a lifesaver:

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

<div ng-app="ngBindHtmlExample">
  <div ng-controller="ngBindHtmlCtrl">
   <p ng-bind-html="myHTML" compile-template></p>
  </div>
</div>



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

app.controller('testApp', function( $scope ) {
    $scope.testHTML = '<h1> Welcome :) </h1>';
});

app.directive('bindHtmlUnsafe', function( $parse, $compile ) {
    return function( $scope, $element, $attrs ) {
        var compile = function( newHTML ) {
            newHTML = $compile(newHTML)($scope);
            $element.html('').append(newHTML);        
        };

        var htmlName = $attrs.bindHtmlUnsafe;

        $scope.$watch(htmlName, function( newHTML ) {
            if(!newHTML) return;
            compile(newHTML);
        });

    };
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.