Binding inside <style>

884 views
Skip to first unread message

Keyamoon

unread,
Feb 26, 2013, 3:35:53 PM2/26/13
to ang...@googlegroups.com
It is possible to have binding inside <style>? ng-style can't help me because inline styles can't have pseudo classes (like :hover). I need to be able to dynamically change some styles.

Not working example: http://jsbin.com/adiziv/1/edit

Binding inside <style> would be very useful in many scenarios.

Michael Bielski

unread,
Feb 26, 2013, 3:54:38 PM2/26/13
to ang...@googlegroups.com
I don't have a direct answer to your question, but inline styles are generally frowned upon. I would think you would be much better off using ng-class. You can pass it an object and hand off any number of classes.

ng-class="{class1:true,class2:someBoolean,class3:someOtherBoolean}"

Keyamoon

unread,
Feb 26, 2013, 4:04:16 PM2/26/13
to ang...@googlegroups.com
I'm not talking about inline styles. Inline styles can be implemented using the ngStyle directive. I'm talking about style elements, which can be used for dynamically making stylesheets. Classes don't solve my problem.

Keyamoon

unread,
Feb 26, 2013, 4:07:00 PM2/26/13
to ang...@googlegroups.com
To be more accurate, I'm talking about "scoped styles". More info here: http://css-tricks.com/saving-the-day-with-scoped-css/

Joshua Miller

unread,
Feb 26, 2013, 4:39:12 PM2/26/13
to angular
Hello!

`style` elements are not part of the standard HTML DOM, so what you are trying to do is not possible. However, you *can* use a directive to create the style element, observe certain attributes, and replace the style element when one of them changes: http://plnkr.co/edit/xsNypqvBjU5Ufc0ZvTws. Please note that this is a dirty hack - but it works. I also only tested it in Chrome and Firefox.

Josh


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

Keyamoon

unread,
Feb 26, 2013, 4:49:09 PM2/26/13
to ang...@googlegroups.com
That's a good idea, Josh. Thank you :) 
Reply all
Reply to author
Forward
0 new messages