Angular JS directives Principles.

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.