Menu
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?
671
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated.
When it comes to do DOM manipulation, binding event, etc... It happens, that we define functions that manipulates the DOM in a custom directive's link function, but we call it from the controller (we define functions in the $scope so it can be accessible by the given controller).
AngularJS comes with a set of these directives built-in, like ngBind , ngModel , and ngClass . Much like you create controllers and services, you can create your own directives for AngularJS to use.
This should do the trick.
var MyApp = angular.module('MyApp', []); MyApp.directive('myTag', function() { return { link: function(scope, element, attributes){ element.addClass('MyClass'); } } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
