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

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

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>

Solution

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 */
}