How to use ng-bind-html but disable tag <h1>, <b>... AngularJS

Question

I used ng-bind-html and show success data, but I want to show only text, not show data with style , because it ruined my layout:

Data is content's notes: <h1>some text....</h1>

My filter:

var myApp = angular.module("myModule", []);
myApp.filter('to_trusted', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
    };
}]);

My view:

<p ng-bind-html="note.content.substr(0, 130) + '...' | to_trusted"></p>

You really shouldn't arbitrarily trust content sent from other sites unless you are filtering it out to make sure it doesn't have malicious scripts being sent into your program. Not sure about stripping out the html tags client side but server side could use unfluff github.com/ageitgey/node-unfluff — shaunhusain
– shaunhusain, Commented Nov 17, 2017 at 11:28

andrea.spot. · Accepted Answer · 2017-11-24 08:34:01Z

1

Short answer: You can apply a css class to the div, resetting html tag formatting behavior overriding it. For example:

<p class="ignore-html-tags" ng-bind-html="note.content.substr(0, 130) + '...' | to_trusted"></p

And in your css:

.ignore-html-tags * {
  font-size: 10px !important;
  font-weight: normal !important;
  /* any other style overwrite */
}

edited Nov 24, 2017 at 8:34

answered Nov 17, 2017 at 11:39

andrea.spot.

4954 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nam Lee Over a year ago

It's not working :(. Html: <p class="ignore-html-tags"><h1>aaa</h1></p. style of class ignore-html-tags not work with <h1> Demo: jsfiddle.net/lion5893/2t5q0fhc

andrea.spot. Over a year ago

@NamLêQuý could you please post a jsfiddle or a codepen snippet? I'll help you directly on the code, then

Nam Lee Over a year ago

thanks your help, i fixed. i use .ignore-html-tags * {...}

Collectives™ on Stack Overflow

How to use ng-bind-html but disable tag <h1>, <b>... AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related