ng-bind-html directive removes style attribute when renders

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 style attribute, so image has initial size. What do you think? How I can avoid this?

Thanks!

Answer 1

Note that ng-bind-html-unsafe has been removed from Angular. I would rather create a filter, instead of adding a function to scope in order to avoid scopes pollution and improve the code reusability:

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

There is no need to write anything in the scope, just add the filter on the template:

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

Answer 2

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

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

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