expressions in style tags

[geddski]

<style>{{mystyles}}</style>

doesn't render the mystyles variable.

[IgorMinar]

this would work if we lived in a land of magic mushrooms were browser remembered that some css came out from a particular style tag and if the content associated with that tag got updated it would throw away the css rules created from that style tag and replaced them with rules derived from the new content.

this is not how browsers work. once the style tag is processed by a browser it becomes a piece of dead garbage so updating it has no effect.

I'm sure that with enough sleepless nights it would be possible to create a way around this and we could trick the browser to do this crazy thing, but I don't think it's worth the effort.

[geddski]

@IgorMinar we must be thinking of two different things, because what you've described is exactly how browsers behave. Changing the contents of a style tag adds/removes/updates the styles applied to the DOM. Here's an example.

So with that being the case, one can imagine how useful it would be to have style tags invited to the angular template party.

[gsklee]

I got some practical use case for this just right now:

<style>
    #some-container {
        background-image: url({{cdnServer}}/bg.jpg);
        height: 300px;
        text-align: center;
        overflow: hidden;
    }
</style>

Since it can't be done this way currently, I am forced to put the background-image rule into an ng-style directive, separating my CSS apart.

[danielsamuels]

@IgorMinar Sorry, but you're completely wrong. Browsers do update the page when the content of style tags are modified. I've just run into this Angular bug on one of my own projects and it's extremely frustrating to see project contributors closing a issue with false information.

[petebacondarwin]

@danielsamuels - Sorry you have run into a problem surrounding this. Can you provide a runnable demonstration of this issue?

[danielsamuels]

@petebacondarwin Quite simply something like:

`<textarea ng-model="pageStyle"></textarea>

<style type="text/css">{{ pageStyle }}</style>`

I also tried putting the ng-model on the style tag directly, but still no dice. In the end I just put an ID on the style tag, then did a $scope.$watch('pageStyle') and updated the innerHTML of the element - not a workaround I wanted to have to make.

Edit: I made a simple test case - http://plnkr.co/edit/wJ2Sm3wnqcGjQ7ZVH9xS

[petebacondarwin]

I don't mean the issue of {{}} not working in <style> elements, I meant can you show that the browser will actually pay attention to changes inside a style element?

[danielsamuels]

Uh, sure? http://jsfiddle.net/ruDq3/ for onchange, http://jsfiddle.net/ruDq3/1/ for keyup + keydown.

[petebacondarwin]

OK, so does this work on all browsers that AngularJS must support, in
particular IE8? I can't test that right now...
Otherwise over to @IgorMinar

On 18 July 2013 21:27, Daniel Samuels [email protected] wrote:

Uh, sure? http://jsfiddle.net/ruDq3/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2387#issuecomment-21212279
.

[danielsamuels]

For IE8, I was able to get it to work with .styleSheet.cssText, but not .innerHTML, as seen here: http://jsfiddle.net/ruDq3/2/

[danieljsinclair]

I can't remember a time where modifying style tags didn't work. There's a good case for this too. If you want to control style specifics globally for the app you don't want to resort to global styles on everything, you just want to modify the class rule. Although, when I say "modify" I don't mean go modify the style rules (and there are a few JS frameworks that offer this) I just mean add an additional rule that overrides the default in the stylesheet. That way the browser's CSS rules engine handles the modification without actually modifying any CSS files and without modifying the DOM. It's actually quite an elegant solution IMHO.

I started out creating a directive that adds a stylesheet template to the end of my head only to discover that the $compile service didn't process style tags. So as a workaround I'm using ng-bind-template which seems to do the trick;

<style id="appStyle" ng-bind-template="@put your css rules angular template"></style>

Where I would have used a partial view template .htm file I now just use a server-side include (with compression to a single line) to inject the attribute. It's not as clean, but to be honest it's simple, smaller and less code than a directive and no harder to maintain.

[deanmcpherson]

Noticed this today and threw together a small directive for style which looks like it is working on modern browsers. Can grab it here https://github.com/deanmcpherson/angular-inline-style if anyone is struggling.

[IgorMinar]

I was wrong. For some reason I believed that updating the CSS after the fact didn't get pick up by the browser and when I tested it for some reason it didn't work, but now I see that it does.

The reason why our data-binding doesn't work in style tags is that we don't decent into style tags during template compilation.

There might be more than one culprit here. If anyone wants to write a test for this and send a PR, we should be able to merge it in 1.3.

[SekibOmazic]

I have made a PR but the travis build fails for IE8 on Windows 7. But Angularjs 1.3 won't support IE<9, right?

[IgorMinar]

@SekibOmazic correct. PR to remove IE8 support is on the way: #6560

[oleics]

Will this be in 1.2.x too?

[yemster]

Would this be ported to 1.2.x as well?

[markevich]

+1 Port this to 1.2.x please

[caitp]

The whole Note: this feature does not work on IE8. may be an indication that we can't port it to 1.2.x. I am not positive