Filter for HTML marks with AngularJS

Question

Filter for HTML marks with AngularJS

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I am creating an API using angularjs to show certain texts in the view, HTML marks appear.

This is my template:

<div class="well well-lg">
  <p class="lead">
    {$ policy.politica $}
  </p>
</div>

And this is what comes out when viewing the page:

...  nos comprometemos a <mark>garantizar el ejercicio de blah blah blah</mark> al ofrecer un ...

Since I am using Bootstrap v3, I would expect to see text with a colored background or something similar instead of the <mark></mark> tags. I understand that the content must get away , but I do not know how to do it in AngularJS.

I will appreciate your help.

Note: The delimiters {$ $} are being used for the binding of Angular for convenience because the server has Django that uses {{ }}

angularjs

asked by toledano 26.04.2016 в 18:31

source

2 answers

3

As an alternative to the jjimenez solution to use $sce.trustAsHtml in the controller you can create a filter that Allow to use it directly from the template.

The filter would be like this:

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

In your template you would use it like this:

<div class="well well-lg">
  <p class="lead">
    {$ policy.politica | rawHtml $}
  </p>
</div>

answered by 27.04.2016 в 21:13

Concatenate two dictionaries without repeating field client.js for Trello API

score 2 · Accepted Answer

Keep in mind that this is a security measure to avoid injecting malicious HTML. That said, if you fully trust that HTML code, you can do it using the service $sce of AngularJS [1].

With this:

$scope.myContent = $sce.trustAsHtml(someContent);

And using the ng-bind-html directive in the template like this:

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

the content of myContent would render as HTML correctly.

[1] link