javascript - How to manipulate styles of directive in AngularJS?

Question

I'm writing a component using AngularJS and AngularJS directives.

I'm doing something like this:

var MyApp = angular.module('MyApp', []);

MyApp.directive('myTag', function() {
    return { /* Some logic here*/ }
});

I want to be able to change style of my component (using CSS), something like this:

<my-tag class="MyClass"></my-tag>

Besides this I want to be able to manipulate all elements style inside my component (HTML markup inside of my-tag).

Do you have any advice or useful examples how to manipulate the style properties of custom tags using AngularJS?

question from:https://stackoverflow.com/questions/19246110/how-to-manipulate-styles-of-directive-in-angularjs

Answer 1

This should do the trick.

var MyApp = angular.module('MyApp', []);

MyApp.directive('myTag', function() {
    return { 
      link: function(scope, element, attributes){
        element.addClass('MyClass');
      }
    }
});