Why doesn't style work in angular?

Question

Angular

Can you please tell me why the style attribute disappears if I add content through angular?
There is an object array, in which there is bare html, I output it like this:

<div class="col-sm-6" ng-repeat="template in templates">
      <div ng-bind-html="template.template"></div>
</div>

Everything is displayed, everything is fine, but the style attributes from html disappear.
An array of objects looks like this:

[{
                "html"  : '<div class="row text-center"> \
                            <div class="col-xs-12"> \
                                <div class="layout" style="border: 1px solid red"> \
                                    <h1>Template 1</h1> \
                                </div> \
                            </div> \
                        </div>'
            }]

In the example above, the style attribute of the tag with the layout class will disappear if the result is inspected. How to pass styles to html in this case?

Answer 1

I found a solution: to transfer styles in this way, you need to wrap them in the controller in $sce.trustAsHtml(), after passing $sce to the controller. Otherwise, ng-bind-html "clears" the markup from inline styles.

Answer 2

It is not necessary to "betray styles" in this way

Answer 3

For dynamic styles that depend on the ngStyle
code For everything else, only css classes link