Angular JS directives Principles.

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.