UrbanPro
true

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

Submit

Other Lessons for You


Closures in Javascript
A closure is the combination of a function and the lexical environment within which that function was declared. Consider the following example: function makeFunc() { var name = 'Mozilla'; function...

Learning a new technology
Each and every day new technologies are getting introduced. Its quite clear that to be part of the fast moving professional world you should be upto date with the cutting edge technologies in the market....
S

Saurav Singh

1 0
0

What Is Dependency Injection (DI)?
Dependency Injection is a powerful pattern for managing code dependencies. DI is a way to create objects that depend upon other objects. Angular has its own DI framework pattern, and you really can't build...
K

Kumar

0 0
0

Dependency Injection in Angular 2
Dependency injection Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires. Most dependencies are services. Angular uses dependency injection...
X

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

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