In AngularJS, directives allow you to extend HTML with custom behaviors. Inside a directive, you may need to manipulate the DOM elements directly, which is where $element comes in.
$element is an AngularJS wrapper around the directive’s DOM element. It provides methods similar to jQuery (if jQuery is included) or raw JavaScript methods to modify, access, or listen to DOM elements.
Step 1: Understanding $element in Directives
When creating a directive, AngularJS injects $element into the link function or controller. It represents the directive’s DOM node, allowing us to:
- Change CSS styles and attributes
- Add or remove CSS classes
- Attach event listeners
- Manipulate inner content dynamically
Syntax
app.directive('myDirective', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
// Using $element to manipulate the DOM
}
};
});
element(or$element) is automatically injected into thelinkfunction.- It behaves like a jQuery object if jQuery is included; otherwise, it behaves like a raw JavaScript element.
Step 2: Changing CSS with $element
We can use $element.css() to dynamically apply styles.
Example – Changing Background Color
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<title>Using $element in Directives</title>
</head>
<body>
<custom-box></custom-box>
<script>
var app = angular.module('app', []);
app.directive('customBox', function() {
return {
restrict: 'E',
template: '<div class="box">Click to Change Color</div>',
link: function(scope, element) {
element.css({
'width': '200px',
'height': '100px',
'background-color': 'lightblue',
'text-align': 'center',
'line-height': '100px',
'cursor': 'pointer'
});
element.on('click', function() {
element.css('background-color', 'lightcoral');
});
}
};
});
</script>
</body>
</html>
How This Works
- The directive creates a div with class
"box". $element.css()applies width, height, background color, and text styles.$element.on('click', function() {...})changes the background color when clicked.
Use case: Useful for interactive UI components like buttons, alerts, or dynamic styling.
Step 3: Adding and Removing CSS Classes
We can use $element.addClass(), $element.removeClass(), and $element.toggleClass() to modify class names dynamically.
Example – Toggling a Class on Click
app.directive('toggleClassBox', function() {
return {
restrict: 'E',
template: '<div class="box">Click Me</div>',
link: function(scope, element) {
element.on('click', function() {
element.toggleClass('highlight');
});
}
};
});
CSS:
.box {
width: 200px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.highlight {
background-color: yellow;
border: 2px solid red;
}
How This Works
- When clicked,
$element.toggleClass('highlight')adds or removes the class"highlight". - This applies new styles dynamically.
Use case: Highlighting selected elements, toggle animations, or theme switching.
Step 4: Modifying Inner Content
We can use $element.text() and $element.html() to update an element’s content dynamically.
Example – Changing Text on Click
app.directive('changeText', function() {
return {
restrict: 'E',
template: '<button>Click Me</button>',
link: function(scope, element) {
element.on('click', function() {
element.text('Clicked!');
});
}
};
});
How This Works
- Clicking the button changes the text to “Clicked!”.
Use case: Useful for button state changes, dynamic messages, or progress updates.
Step 5: Adding and Removing Elements
We can use $element.append(), $element.prepend(), and $element.remove() to manipulate elements inside a directive.
Example – Adding a New Element Dynamically
app.directive('addItem', function() {
return {
restrict: 'E',
template: '<button>Add Item</button><ul></ul>',
link: function(scope, element) {
var ul = element.find('ul');
element.find('button').on('click', function() {
ul.append('<li>New Item</li>');
});
}
};
});
How This Works
- Clicking the button adds a new
<li>to the list dynamically.
Use case: Ideal for dynamic lists, adding comments, or notifications.
Step 6: Removing an Element
If we want to remove an element from the DOM, we can use $element.remove().
Example – Removing an Element After Click
app.directive('selfDestruct', function() {
return {
restrict: 'E',
template: '<div class="box">Click to Remove</div>',
link: function(scope, element) {
element.on('click', function() {
element.remove();
});
}
};
});
How This Works
- Clicking the element removes it from the DOM.
Use case: Useful for notifications, temporary popups, or dismissible alerts.
Step 7: Listening to Events
We can attach event listeners like click, mouseover, keydown, etc.
Example – Changing Background on Hover
app.directive('hoverEffect', function() {
return {
restrict: 'E',
template: '<div class="box">Hover Me</div>',
link: function(scope, element) {
element.on('mouseover', function() {
element.css('background-color', 'lightgreen');
});
element.on('mouseleave', function() {
element.css('background-color', 'lightblue');
});
}
};
});
How This Works
- When the mouse enters, it changes the background to light green.
- When the mouse leaves, it returns to light blue.
Use case: Useful for hover effects, tooltips, or interactive UI.
Conclusion
$element in AngularJS directives is a powerful tool for manipulating DOM elements dynamically. Here’s a recap:
| Feature | Example | Use Case |
|---|---|---|
| Changing CSS | element.css({...}) | Custom styling, UI changes |
| Adding Classes | element.addClass('highlight') | Animations, themes |
| Modifying Content | element.text('New Text') | Dynamic messages, labels |
| Adding Elements | element.append('<li>Item</li>') | Dynamic lists, notifications |
| Removing Elements | element.remove() | Alerts, dismissible items |
| Event Listeners | element.on('click', fn) | Interactions, tooltips |
By using $element, you can build dynamic, interactive, and optimized UI components in AngularJS.