AngularJS custom directives are one of the most powerful components of AngularJS, helping you extend basic HTML elements/attributes and create reusable code.
Custom Directive types:
In AngularJS we can create the custom directive for the following types of elements.
Element directives:
Directive activates when a matching element is encountered. Restrict mode is defined by "E".
Example: <ng-directives></ng-directives>
Attribute:
Directive activates when a matching attribute is encountered. Restrict mode is defined by "A".
Example: <span ng-directive></span>
CSS:
Directive activates when a matching css style is encountered. Restrict mode is defined by "C".
Example: <span class="ng-directive"></span>
Comment:
Directive activates when a matching comment is encountered. Restrict mode is defined by "M".
Example: <!-- directive: ng-directive -->
How to create custom directives:
Example 1:
In the above code we defined the name of the directive (ngDemo). Type of the directive is an attribute that is defined by restrict: 'A'. Here the restrict option is used to define the type of element for which this directive will invoke.
In template option we define the text (template) that replaces the content of the element that invokes this directive. Template is an option where we are specifying the html that will be appended or append.
Using the above code we invoked the directive. Notice that when we invoke it (ng-demo) and the name of directive (ngDemo), both are not the same. This is because AngularJS will handle translating the camel cased name when we define it to the snake case when we invoke it.
Click here to read about data binding.
- <html>
- <head>
- <title>Angular JS Custom Directive Example</title>
- </script>
- <style>
- .sparkline
- {
- background-color: brown;
- font-size: large;
- height: 100px;
- width: 200px;
- color: aqua
- }
- </style>
- </head>
- <body>
- <h2>AngularJS Custom Directive Example</h2>
- <div ng-app="mainApp">
- <divng-demo>
- </div>
- </div>
- </body>
- <script>
- var mainApp = angular.module("mainApp", []);
- mainApp.directive('ngDemo', function()
- {
- return
- {
- restrict: 'A',
- template: '<div class="sparkline">Simple Custom Directive of Element Type</div>'
- }
- });
- </script>
- </html>
In template option we define the text (template) that replaces the content of the element that invokes this directive. Template is an option where we are specifying the html that will be appended or append.
<divng-demo></div>
Using the above code we invoked the directive. Notice that when we invoke it (ng-demo) and the name of directive (ngDemo), both are not the same. This is because AngularJS will handle translating the camel cased name when we define it to the snake case when we invoke it.
Click here to read about data binding.
I like your post very much. It is very much useful for To me. I hope you to share more info about this. Keep posting...
ReplyDeleteAngular JS Online training
Angular JS training in hyderabad
Have any concern like Which is the Best AngularJS Development Company? And perplexed over choosing a development framework for your web application. Then we suggest you go with the AngularJS framework for web development and hire Angular JS developer for your web app development project. There are several prominent names among the Angularjs development companies, you can consider for your web application requirement.
ReplyDelete