rxdazn rxdazn - 4 months ago 91
AngularJS Question

ng-bind-html strips elements attributes

I'm trying to interpolate a string that contains some markup in a template.

In the controller:

$scope.message = "Hello moto <a ui-sref='home.test'>click</a>";


Template:

<div ng-bind-html="message.text"></div>


which renders as:

<div ng-bind-html="message.text" <div="" class="ng-binding">Hello moto <a>click</a></div>


Trying to use the following filter does not help either; the text is simpy escaped for either of the commented choices:

angular.module('test-filters', ['ngSanitize'])
.filter('safe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
//return $sce.trustAsUrl(val);
//return $sce.trustAsResourceUrl(val);
};
});


How can I interpolate my string without escaping it nor stripping attributes?

Edit: Plunker http://plnkr.co/edit/H4O16KgS0mWtpGRvW1Es?p=preview (updated with sylwester's version that has reference to ngSanitize

Answer

Let have a look here http://jsbin.com/faxopipe/1/edit it is sorted now. It didn't work because there was another directive inside a tag 'ui-sref', so you have to use $sce service.

in your js please add method:

 $scope.to_trusted = function(html_code) {
    return $sce.trustAsHtml(html_code);

and in view :

<p ng-bind-html="to_trusted(message)"></p>