angularjsng-bind-html

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:

enter image description here

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