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?
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.
<p>{{ … }}</p> for me.
{{ ... }} will only print out the text of the content. I have updated the answer.
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>
.html()?
html(); it end's up like this [object HTMLHeadingElement] and I also prefer to append anyway
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>
I would strongly recommend checking out this SIMPLE JSFiddle example. Was a lifesaver:
<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);
});
};
});
