Learn Angular.JS from the Best Tutors

  • Affordable fees
  • 1-1 or Group class
  • Flexible Timings
  • Verified Tutors

Search in

Angular JS directives Principles.

Rupesh Kumar
16/01/2017 0 0

Directive is very powerful feature of AngularJS. It easily wired up with controller, html and do the DOM manipulations. Angular AngularJS provide very less details about directive. I thought I will cover some of the directive that I used in real projects.

Compile Function :

use for template DOM manipulation (i.e., manipulation of tElement = template element), hence manipulations that apply to all DOM clones of the template associated with the directive.

Example: disable all element in a DIV

  1. app.directive('disableContents', function () {
  2. return {
  3. compile: function (tElem, tAttrs) {
  4. var inputs = tElem.find('input');
  5. inputs.attr('ng-disabled',tAttrs['disableContents']);
  6. for(var i = 0; i < inputs.length; i++) {
  7. }
  8. }
  9. }
  10. });

Link Function:

Use for registering DOM listeners (i.e., $watch expressions on the instance scope) as well as instance DOM manipulation (i.e., manipulationof iElement = individual instance element).

Check Valid email on textbox blur

  1. app.directive('validEmail', ['$dependency', function ($dependency) {
  2. return {
  3. require: 'ngModel',
  4. link: function (scope, element, attrs, ngModel) {
  5. element.bind('blur', function (e) {
  6. if (!ngModel || !element.val()) return;
  7. var currentValue = element.val();
  8. var regex = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
  9. if (currentValue && !regex.test(currentValue)) {
  10. ngModel.$modelValue = '';
  11. element[0].value = '';
  12. alert(INVALID EMAIL);
  13. }
  14. });
  15. }
  16. }
  17. }]);

You can use directive in all scenario where you want to manipulate DOM elements.

0 Dislike
Follow 0

Please Enter a comment


Other Lessons for You

What's New in Angular 8?
The latest features introduced during the Angular 8 release candidate stage include: Smaller bundles, CLI APIs, and alignment with the ecosystem AngularJs Migration Improvements Route Configurations...


0 0

Amazing Photoshop Cs6 Effect - Puppet Warp.
Being a puppet master using Adobe Photoshop Creative Suite 6 is an easy task with Puppet Warp. Think of Puppet Warp as a lighter weight Liquify filter. This command enables you to distort specific areas...

.NET With AngularJS Training Program Syllabus
What You will Learn in .NET with AngularJS Training Program? Introduction to .Net: Features of .Net, CTS, CLS, CLR and MSIL. C# & .Net Basics and Branching & Flow Control. OOPs Concepts,...

Get job by learning simple HTML, CSS and UI Design and earn income :)

Sekhar P.

0 0

Looking for Angular.JS Classes?

The best tutors for Angular.JS Classes are on UrbanPro

  • Select the best Tutor
  • Book & Attend a Free Demo
  • Pay and start Learning

Learn Angular.JS with the Best Tutors

The best Tutors for Angular.JS Classes are on UrbanPro

Book a Free Demo

This website uses cookies

We use cookies to improve user experience. Choose what cookies you allow us to use. You can read more about our Cookie Policy in our Privacy Policy

Accept All
Decline All

UrbanPro.com is India's largest network of most trusted tutors and institutes. Over 55 lakh students rely on UrbanPro.com, to fulfill their learning requirements across 1,000+ categories. Using UrbanPro.com, parents, and students can compare multiple Tutors and Institutes and choose the one that best suits their requirements. More than 7.5 lakh verified Tutors and Institutes are helping millions of students every day and growing their tutoring business on UrbanPro.com. Whether you are looking for a tutor to learn mathematics, a German language trainer to brush up your German language skills or an institute to upgrade your IT skills, we have got the best selection of Tutors and Training Institutes for you. Read more