How to useServices in Angular
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.
<!-- 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;">w3wiki</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:
How to pass input to a custom directive in Angular JS?
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.
Table of Content
- Using Attribute Binding
- Using Services
Contact Us