current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

i'm trying to figure out how to bind angularjs scope vars into css syntax the problem i think is the curly braces here is what i'm basically trying to do:

<style>.css_class {background:{{ angular_variable }}; color:#ffffff;}</style>
<style>.css_rule {background:{{ "#000000" }}; color:#ffffff;}</style>
<style>.css_rule {background:{{ var | someFilter }}; color:#ffffff;}</style>

Any ideas on how this could be accomplished? Thank you!

share|improve this question
    
Have you check ng-class docs.angularjs.org/api/ng.directive:ngClass . Where is this code located? –  Chandermani Aug 15 '13 at 7:56
    
yes i know about ng-class but i need to manipulate non-dom elements like ::-webkit-scrollbar... the css code is in the html view (inside the controller scope) –  dcohenb Aug 15 '13 at 8:15
add comment

3 Answers

up vote 0 down vote accepted

As explained here angular doesn't run on content inside style tags. There's a workaround plunkr in that post but as a more flexible approach I'd just create a directive that grabs the contents, parses them and replaces:

app.directive('parseStyle', function()
{
    return function(scope, elem)
    {
        elem.html(scope.$eval('\'' + elem.html() + '\''));
    };
});

then:

<style parse-style>.css_class {color: ' + angular_variable + ';}</style>

Not sure about the browser support for this though.

http://jsfiddle.net/VUeGG/4/

share|improve this answer
    
Thank you very much! this did the trick perfectly! –  dcohenb Aug 15 '13 at 11:11
add comment
up vote -1 down vote

You shouldn't need the curly braces as these are being evaluated inside html directive - you only need to use the curly braces if you have an expression that is evaluated outside of them ie;

<p ng-class="some-angular-variable">
  {{some-angular-variable}}
</p>

In your situation, removing the double-curly braces and using double-quotes should solve the problem.

As an aside, Chandermani is on the money - what you are trying to is better accomplished with the ng-class directive. Using it will allow to apply a class (or several) to the corresponding tag.

ie;

<p ng-class="mystyle">
    some text
</p>

say you have two classes style1 and style2

You can select whichever one to apply with

scope.mystyle = "style1" // or whatever

in your controller.

share|improve this answer
    
i need to apply an "unknown" color that will come in later.. so classes are not relevant here.. plus, i cannot apply the ng-class / ng-style attributes to non dom element like ::-webkit-scrollbar –  dcohenb Aug 15 '13 at 11:04
add comment
up vote -1 down vote

I can't understand why u want use thid idea! U should use ng-class for that!

For example:

<p ng-class="{strike: strike, bold: bold, red: red}">Map Senter code hereyntax Example</p>
share|improve this answer
    
Because i need to manipulate non dom elements like the scroll bar with a color that comes from outside source –  dcohenb Aug 15 '13 at 11:02
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.