Angularjs Custom Directive Example
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Amruta
In this tutorial we will show you the solution of angularjs custom directive example, in controller we need to define our directive for how to use whether attribute or element.
We can create directive both way after that we need to define where how to we are going to use them in webpage.
We just use them at html so we need to define html details in controller ‘template’.
Step By Step Guide On Angularjs Custom Directive Example :-
In our application we need to create our own directive with our rules. In controller we need to append our application to ‘directive’ for creation with our directive name ‘cusDirective’.
Then in ‘linkfunc’ function we passed parameters ‘$scope,element,attribute’ and using $scope object we sets text value to some string.
The ‘changetxt’ function defined for when clicks on displayed string it will changed to another string.
In return block link refers linked functions in controller, template refers html code of what needs to display on webpage and restrict for define ‘A-Attribute, E-Element’. Lastly controller appends to application.
<!DOCTYPE HTML>
<html>
<head>
<title>Custom Directive</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app=angular.module("myapp",[]);
app.directive("cusDirective", function(){
function linkfunc($scope,element,attribute){
$scope.text="Welcome all";
$scope.changetxt=function(newtxt){
$scope.text=newtxt;
}}
return{
link: linkfunc,
template: '<span ng-click="changetxt(\'Hello everyone\')">Current text:{{text}}</span>',
restrict: 'A'
};
});
app.controller("ctrl",function(){
});
</script>
</head>
<body ng-app="myapp" ng- controller="ctrl">
<div cus-directive>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage is must by using <script> tag.
- We created ‘app’ variable used to store our application ‘myapp’ and in application we need to before append controller ‘ctrl’ to application append directive ‘cusDirective’.
- Our directive name must have ‘Directive’ word ‘D’ needs to be uppercase after function defined within that we defined ‘linkfunc’ function with parameters ‘$scope,element,attribute’ passed.
- Here we using scope object we sets ‘text’ variable string to ‘Welcome all’ and when user clicks on this string it loads ‘changetxt’ function with parameter of result string ‘Hello everyone’ defined in html template.
- Result string is assigned to current string using scope object in ‘changetxt’ function. In return link for link defined function in controller so we gives ‘linkfunc’ function as value.
- The template for define html block, here we used <span> tag with ‘ng-click’ directive to load ‘changetxt’ function with some string parameter needs to display as a result on webpage.
- Within <span> tag defined strings displayed as a initial result on webpage and in restrict ‘A’ defines ‘Attribute’ because we used our directive as a attribute on html block.
- Lastly we appends our application to controller ‘ctrl’.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here. In angularjs we needs to define our application and controller using directives of ‘ng-app and ng-controller’ with respective values ‘myapp and ctrl’.
- Within a <div> tag we defined our own creation of directive ‘cusDirective’ as a attribute of cus-directive. When defining custom directive we needs to insert ‘-’ in middle then ‘D’ to be smaller letter of ‘d’.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to create custom directive using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program when user executing on browser it will display defined code in template then when we clicks on string ‘Welcome all’ it changed to string ‘Hello everyone’.
We can create directive with any other different process result based on our thoughts.
I hope this tutorial on angularjs custom directive example helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
