How to CSS Style Angularjs Directive

How to CSS style AngularJS directive?

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.

Angular JS directive - location of CSS file relative to HTML

I think there are two ways to fix your issue as you don't know where the directives are located:

Solution 1 - Ancient HTML Way

If the length of the CSS is small, you can directly include it in your template HTML itself, through the style tag.

<style type="text/css">
    Add style rules here
</style>

Solution 2 - The Angular Way(most recommended)

Use ngHref directive.

In your directive.js code, you can just put the path of the directive.html to a scope/rootScope variable and then you can access it from the directive.html

In directive.js

link: function (scope, iElement, iAttrs) {
     scope.htmlPath = <path of templateURL>;
 }

In directive.html

<link rel="stylesheet" ng-href="{{ htmlPath }}/filename.css">

Note:

I hope you are not using Gulp to build the angular JS code. But, If your are using gulp, you can add a gulp task and pipe all the CSS to a single CSS and can inject to your index.

Changing body css style property from AngularJS directive

I stumbled upon a solution at:
http://corpus.hubwiz.com/2/angularjs/16725136.html

The final code looks like this:

app.directive("parallaxDir", function ($window, $document) {
    return function (scope, element, attrs) {
        angular.element($window).bind("scroll", function () {
            var body = angular.element(document).find('body');
            body.css("background-position-y", ($window.pageYOffset / 2) + "px");
            scope.$apply();
        });
    };
});

angularjs directive : how to encapsulate css?

There is a one angular service already created on GitHub, you can load your css files dinamically, maybe it can be helpful

https://github.com/Yappli/angular-css-injector

Or you can give a chance to GruntJS and you can have a very nice project structure, every module/folder can have own css file, and Grunt will bundle all that files into one (or many, it depends how you configure). It's easy to manage and change, but also you have only one file loaded on your page. Maybe these links can be helpful to find Grunt module that can help you.

https://www.npmjs.org/package/grunt-contrib-cssmin

Apply CSS to AngularJS Directive Element Tag

If you don't want to define a class in the HTML markup you could also use

elem.addClass('foo')

To define a class in the directive itself.

---

If you really don't want to resort to classes you could do:

elem.css('cursor','pointer');

or

elem.attr('style','cursor: pointer');

AngularJS - how to set css class for the custom directive?

You have a wrong sequence in link function

Instead of

link: function(element, scope) {

Change it to

link: function(scope, element, attrs) {

Then you can directly do element.addClass as jQLite api has .addClass method available on it.

---

Related Topics