How can I embed angular directive style within the js code?

Question

I have a project written in angular 1.5 Until I upgrade to angular 2, I would like to reach a state where I write something like

angular.module(..).directive('name', () => {
     return {
         restrict: 'A', 
         template: `
             <div> ... some template... </div>
         `,
         style: `// this is what I am missing
             div{
                // some css
             }
         `, 
         controller: function($scope){ ... }   
     }
})

The only piece I am missing is the style part. How can I get that? Is it supported in angular 1.x? Is there a tool that can help me get this functionality?

To make it clear - I am not asking about scoped css.
I don't care that these rules will be global or not.
I just want to be able to write the css next to the template and the controller.

So if you know about a tool like babel for example that can extract the style part to a css/scss file, that would qualify.
It can even be a general solution that I can use for this scenario.

how about putting your css inside <style> tag inside your template? — Ceylan Mumun Kocabaş
– Ceylan Mumun Kocabaş, Commented Nov 23, 2016 at 10:36

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Taken from Reddit

To my knowledge, there is no way to do that "automatically". Personally when i create a component i just give a specific ID / class to the top element, and restrict the component's CSS to that element.

Example: my-component.html

<div class="my-component-wrapper">
 ....
 </div>

my-component.scss

.my-component-wrapper {
   // style that applies only to my component
}

A style property on an angular 1.5 component is not supported or it'd have been mentioned in the docs

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 23, 2016 at 10:17

Robin-Hoodie

4,9944 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

guy mograbi Over a year ago

your answer is about scoping.. I am asking about code organization. I just want my code to be in the same file. for scoping I can (and I already do) use your suggestion.

Robin-Hoodie Over a year ago

@guymograbi You're asking how to have a css style apply only to a component, which this answer solves. A style property on an angular 1.5 component is not supported or it would have been mentioned in the docs

guy mograbi Over a year ago

I am trying to clarify my question. I did not write the word 'apply' anywhere.. I just want the 'style' to be next to the 'template' and the 'controller'.

Robin-Hoodie Over a year ago

@guymograbi I'm not sure what your ultimate goal is here. You want to have the style tag next to template and controller like in Angular 2. The purpose of that tag in Angular 2 is so that your css style will only apply to that particular component, but now you're saying that that's not what you want?

guy mograbi Over a year ago

right, I just want the organized in a single file. - not necessarily a 'style' property.. just have the javascript, html and css in a single file. it's very easy.

Collectives™ on Stack Overflow

How can I embed angular directive style within the js code?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related