AngularJS ignores inline style

Question

Consider the following:

<span ng-bind-html="product.icon"></span>

If product.icon contains:

<img src="http://localhost/angularjs/public/gfx/product/logo_1.png" width="18" height="18">

It will display fine. However, if it contains:

<img src="http://localhost/angularjs/public/gfx/product/logo_1.png" style="width: 18px; height: 18px">

Then width and height are not respected.

Why this behavior? Is it because of : or ; from the inline style?

what do you mean not respected? If inside <span> you can see <img..> then your question probably has nothing to do with angular, but rather with css — Max Koretskyi
– Max Koretskyi, Commented Feb 19, 2015 at 20:29
"By default, the resulting HTML content will be sanitized using the $sanitize service". — Blackhole
– Blackhole, Commented Feb 19, 2015 at 20:30

user2094178 · Accepted Answer · 2015-02-19 20:47:13Z

1

In this case, it was not enough to use ng-bind-html, I had to combine it with this filter:

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

Now using <span ng-bind-html="product.logo_and_name | to_trusted"></span> the inline css is respected.

answered Feb 19, 2015 at 20:47

user2094178

9,47410 gold badges45 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ignores inline style

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related