Home » Angularjs » How to CSS style angular directive?

How to CSS style angular directive?

Posted by: admin November 30, 2017 Leave a comment

Questions:

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.

Answers:

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:

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

Example 1:

HTML:

<mydirect></mydirect>

CSS:

mydirect{ /* Styles go here */ }

Example 2:

HTML:

<div mydirect></div>

CSS:

div[mydirect]{ /* Styles go here */ }

Example 3:

HTML:

<div data-mydirect></div>

CSS:

/* Leaving off the 'div' in this example allows the same
   styles to apply to any element with the `data-mydirect` attribute,
   regardless of its tag type */

[data-mydirect]{ /* Styles go here */ }

Hope that helps.

Questions:
Answers:

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;

}

Questions:
Answers:

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'.

Questions:
Answers:

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 -->