Directives

Tomasz Białecki

Inspired by

http://www.packtpub.com/sites/default/files/1820OS.jpg

What are Directives?

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element or even transform the DOM element and its children.

Why you would want to develop custom directives?

... to manipulate the DOM directly

... to remove repeated codes

... to create new HTML mark-up for non-developers to use

How to attache directive to an element?


.directive('myDirective', function(){
    return {
        restrict:'E'
    }
});

How to attache directive to an element?


.directive('myDirective', function(){
    return {
        restrict:'A'
    }
});

How to attache directive to an element?


.directive('myDirective', function(){
    return {
        restrict:'C'
    }
});

What is a scope of directive?


.directive('myDirective', function(){
    return {
        restrict: 'ACE'
        scope: false                    //no scope (use parent scope)
    }
});

What is a scope of directive?


.directive('myDirective', function(){
    return {
        restrict: 'ACE'
        scope: true                     //create child scope
    }
});

What is a scope of directive?


.directive('myDirective', function(){
    return {
        restrict: 'ACE'
        scope: {                        //create new isolated scope
        }
    }
});

Useful build in directives

ngRepeat

ngShow / ngHide

ngClass

ngDisabled

ngIf / ngInclude