AngularJS忽略内联样式 [英] AngularJS ignores inline style

问题描述

请考虑以下内容:

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

如果 product.icon 包含:

<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">

然后不遵守 width 和 height .

为什么这种行为?是因为内联样式中的:还是; ?

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

推荐答案

在这种情况下，仅使用 ng-bind-html 是不够的，我必须将其与以下过滤器组合:

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);
        };
    }]);

现在使用< span ng-bind-html ="product.logo_and_name | to_trusted"</span> 内联css即可.

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

这篇关于AngularJS忽略内联样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！