How to CSS style AngularJS directive?

Question

Assuming I have a directive "mydirect" with a template that contains a lot of divs with a lot of nested classes. For example:

<div class="mydirect">
  <div class="classA">
    <div class="subclassA">
      <div class="subclassB">
      </div>
    <div class="classB"></div>
</div>

I noticed that despite having the classnames in a css file ("mydirectstyle.css") and it being included in index.html, using my directive:

angular.module("MyApp", []).
  directive('mydirect', function() {
    return {
      restrict: 'E',
      replace: true,
      template: '-All that Html here-'
    };
  });

None of the CSS properties are applied to it whatsoever. What is the best way to apply all my styles to those multiple classes? Can it be done such that I don't have to manually select each element and set individual CSS properties?

My index.html page contains a <mydirect> </mydirect> that gets replaced by the directive template shown above.

the css properties should apply in your directive template. Can you make a plunker or jsfiddle which shows the problem? — Davin Tryon
– Davin Tryon, Commented Oct 24, 2013 at 21:30
Yep, hard to tell you what's going on without seeing your CSS — Mike Robinson
– Mike Robinson, Commented Oct 24, 2013 at 21:36

tennisgent · Accepted Answer · 2017-11-17 03:54:23Z

55

Its much easier to use actual element names to create directives in your DOM rather than trying to use the class method. For two reasons: 1) its much more readable to have <mydirect> vs <div class="mydirect"> and 2) you can get the same ease of styling by just using the proper css syntax.

Leave your directive just the way it is, except change it to restrict: 'EA' (docs for that here) and replace: false, as shown here:

.directive('mydirect', function() {
    return {
        restrict: 'EA',
        replace: false,
        template: '-All that Html here-'
    };
});

Here are the options you can now use and how to configure the corresponding CSS to get the styles you want, as shown in this jsbin:

Hope that helps.

edited Nov 17, 2017 at 3:54

answered Oct 25, 2013 at 0:07

tennisgent

14.2k9 gold badges52 silver badges48 bronze badges

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

2 Comments

tennisgent Over a year ago

You have replace: true enabled with a template, so your component element gets replaced with a <p> tag (based on your template string). Therefore the CSS of hello-world{...} doesn't match and therefore doesn't get applied. If you set replace: false, everything works.

tennisgent Over a year ago

You are correct. To avoid confusion, I have updated my answer. Hope that helps.

Mahesh K · Accepted Answer · 2016-10-27 13:29:40Z

5

Angular Directive with Custom CSS.

app.directive('bookslist', function() {

    return {
    	scope: true,
        templateUrl: 'templates/bookslist.html',
        restrict: "E",
        controller: function($scope){

        },
        link: function(scope, element, attributes){
        element.addClass('customClass');
      }

    }

});

.customClass table{
	!background: #ddd;

}
.customClass td{
	border: 1px solid #ddd;

}

edited Oct 27, 2016 at 13:29

answered Aug 31, 2016 at 11:31

Mahesh K

1,7073 gold badges23 silver badges37 bronze badges

2 Comments

B001ᛦ Over a year ago

A good answer will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO.

Mistalis Over a year ago

Furthermore, the snippet does not run.

Skatox · Accepted Answer · 2015-10-16 16:02:18Z

4

As per google under and Angular directive creation logic In below example’s description object, setting two config components. First, we’re setting the restrict config option. The restrict option is used to specify how a directive can be invoked on the page.

As we saw before, there are four different ways to invoke a directive, so there are four valid options for restrict:

'A' - <span ng-sparkline></span> 
'E' - <ng-sparkline></ng-sparkline> 
'C' - <span class="ng-sparkline"></span> 
'M' - <!-- directive: ng-sparkline -->

edited Oct 16, 2015 at 16:02

Skatox

4,27412 gold badges47 silver badges50 bronze badges

answered Oct 16, 2015 at 15:45

ashutosh

411 bronze badge

Comments

bekite · Accepted Answer · 2013-10-24 21:52:54Z

3

I think the solution to this is simple. But its only a guess. You define the directive by using:

<div class="mydirect></div>

and in your directive definition you use:

restrict: 'E'

The directive is not rendered by Angularjs because Angularjs is looking for something like:

<mydirect></mydirect>

Simply change restrict: 'E' to restrict: 'C'.

answered Oct 24, 2013 at 21:52

bekite

3,4442 gold badges26 silver badges31 bronze badges

3 Comments

Rolando Over a year ago

I tried that. it doesn't work. it must have something to do with the fact the my direct element when replaced by the directive template , none of the CSS gets applied because of the replacement. question is how to deal with it?

Zach Snow Over a year ago

@Rolando here is an example that seems to work in the way you describe; perhaps something else is amiss. Do note however that the directive class is applied to the template itself, so your classes might not be ending up where you expect them. plnkr.co/edit/zQ5teYoQ7qeUbsM71b57

bekite Over a year ago

@Rolando how do you call your directive? you need to have <div class=mydirect></div> somewhere outside of the directive "mydirect" template. I think the problem is not the replacement but the fact that angularjs doesn't find the directive to render.

Collectives™ on Stack Overflow

How to CSS style AngularJS directive?

4 Answers 4

2 Comments

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related