How to pass input to a custom directive in Angular JS?
Last Updated :
15 Mar, 2024
In AngularJS, passing input to a custom directive allows the customization of components within an application. Directives can receive input via attributes, expressions, or controller functions, allowing for dynamic behavior and data binding.
In this article, we will explore two different approaches to pass input to a custom directive.
Steps to Configure the AngularJS Applications
The below steps will be followed to configure the AngularJS Applications:
Step 1: Create a new folder for the project. We are using the VSCode IDE to execute the command in the integrated terminal of VSCode.
mkdir custom-directive
cd custom-directive
Step 2: Create the index.html file in the newly created folder, we will have all our logic and styling code in this file.
Approach 1: Using Attribute Binding
In this approach, we are using attribute binding to pass input to a custom directive in AngularJS. The directive is defined with restrict: 'A', and the input value is passed through the myDirective attribute. Within the directive's link function, we watch for changes in the myDirective value and update the element's text.
Syntax:
<div my-directive="name"></div>
Example: The below example uses Attribute Binding to pass input to a custom directive in AngularJS.
HTML
<!-- index.html -->
<!DOCTYPE html>
<head>
<title>Approach 1: Attribute Binding</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Approach 1: Using Attribute Binding</h3>
<input type="text" ng-model="name" placeholder="Enter your name">
<div my-directive="name"></div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.name = "";
});
app.directive('myDirective', function () {
return {
restrict: 'A',
scope: {
myDirective: '='
},
link: function (scope, element, attrs) {
scope.$watch('myDirective',function(newVal,oldVal){
if (newVal !== oldVal) {
element.text("Hello, " + newVal);
}
});
}
};
});
</script>
</body>
</html>
Output:
Approach 2: Using Services
In this approach, we are using an AngularJS service to perform communication between the controller and the directive. The service (inputService) stores the user input and provides methods to manipulate it. The controller updates the service with the user input, and the directive listens for changes in the service's data and updates the DOM.
Syntax:
app.service('serviceName', function() {
 // service code
  this.someMethod = function() {
    // Method implementation
  };
  this.someProperty = 'value';
});Example: The below example uses Services to pass input to a custom directive in AngularJS.
HTML
<!-- index.html -->
<!DOCTYPE html>
<head>
<title>Approach 2: Using Services</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Approach 2: Using Services</h3>
<input type="text" ng-model="name" placeholder="Enter your name">
<button ng-click="approachFn()">Click Me</button>
<div my-directive></div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, inputService) {
$scope.name = "";
$scope.approachFn = function () {
inputService.approachFn($scope.name);
};
});
app.service('inputService', function () {
this.uInput = "";
this.approachFn = function (name) {
this.uInput = "Hello, " + name;
};
this.getFn = function () {
return this.uInput;
};
});
app.directive('myDirective', function (inputService) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(function () {
return inputService.getFn();
}, function (newVal, oldVal) {
if (newVal !== oldVal) {
element.text(newVal);
}
});
}
};
});
</script>
</body>
</html>
Output:
Similar Reads
What is a custom directive in Angular?
Angular, a popular framework for building dynamic web applications, offers a powerful feature known as custom directives. These directives extend the functionality of HTML elements, enabling to create reusable components and add behavior to their applications. In this article, we'll learn about the
4 min read
How to pass multiple parameter to @Directives in Angular ?
Angular directives are TypeScript classes decorated with the @Directive decorator. These are powerful tools for manipulating the DOM and adding behavior to elements. They can modify the behavior or appearance of DOM elements within an Angular application. Directives can be broadly categorized into t
3 min read
How to Use & Create custom directive in Angular?
Directives in Angular are nothing but the classes that allow us to add and modify the behavior of elements. Using directives in angular we can modify the DOM (Document Object Module) styles, handle user functionality, and much more. Table of Content Custom DirectivesSteps to create the DirectiveBene
2 min read
How to use a Custom Service Inside a Filter in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. An Angular service is a broad category that consists of an
4 min read
How to detect when an @Input() value changes in Angular?
@Input() is basically a decorator to bind a property as an input. It is used to pass data i.e property binding from one component to other or we can say, from parent to child component. It is bound with the DOM element. When the DOM element value is changed, Angular automatically updates this proper
3 min read
How to create nested controllers in Angular.js ?
A controller in AngularJS is a JavaScript object created with the help of a JavaScript object constructor. A controller can contain properties and functions. Controllers are used for controlling the application data of an AngularJS application. In this article, we will see the nested controllers in
4 min read
Built-in Structural Directives in Angular
Directives in Angular are nothing but the classes that allow us to add and modify the behavior of elements. Using directives in angular we can modify the DOM (Document Object Module) styles, handle user functionality, and much more. In this article, we will see more about Built-in structural directi
3 min read
How to pass data from Parent to Child component in Angular ?
We can use the @Input directive for passing the data from the Parent to Child component in Angular Using Input Binding: @Input - We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is t
3 min read
How to add input fields dynamically on button click in AngularJS ?
The task is to add an input field on the page when the user clicks on the button using AngularJs. Steps: The required component for the operation is created (add-inputComponent). In that component, html file (add-input.component.html) required html is written. In that HTML, the main div for input fi
2 min read
Built-in directives in Angular
Directives are markers in the Document Object Model(DOM). Directives can be used with any controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present that are predefined but if a developer wants he can create new directives (cus
5 min read