The ng-bind-html directive removes a style attribute when rendering

Question

When I write

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

Where

  this.$scope.slideContent = this.$sce.trustAsHtml("<img src='1.jpg' style='width: 231px'></img>"); 

angular removes the style attribute, so the image has an initial size. What do you think? How can i avoid this?

Thanks!

Answer 1

use ng-bind-html = "trustedHtml (resultList.section)" in the html tag and put this function controller

 $scope.trustedHtml = function (plainText) { return $sce.trustAsHtml(plainText); } 

 <div ng-bind-html="trustedHtml(resultList.section)"></div> 

Answer 2

use ng-bind-html-unsafe . but be careful not to use it with user-provided input.

Answer 3

Please note that ng-bind-html-unsafe been removed from Angular. I would prefer to create a filter instead of adding a function to the scope to avoid polluting areas and improve code reuse:

 app.filter('unsafe', ['$sce', function ($sce) { return function (input) { return $sce.trustAsHtml(input); } }]); 

There is no need to write anything in the field, just add a filter to the template:

 <div ng-bind-html="resultList.section | unsafe"></div>