CODEWITHSUNDEEP
javascriptangularjs
guy mograbi
guy mograbi

Reputation: 28608

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

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.

Upvotes: 1

Views: 47

Answers (1)

Robin-Hoodie
Robin-Hoodie

Reputation: 4974

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

Upvotes: 1

Related Questions