Custom Directive

We can also make our own custom directives, in order to make the html code even more expresive.

There are several kinds of Custom Directives

1. Template expanding Directives

• define a custom tag or attribute that is expanded or replaced
• can include Controller logic, if needed

Directives can also be used for

• Expressing complex UI
• Calling events and registering event handlers
• Reusing common components

Example of an Element Directive

    Custom Element Directive 

    <product-title></product-title>

    Within the app.js file, please checkt that dash in HTML translates to camelCase in javaScript

    app.directive('productTitle', function(){
        return {
            restrict: 'E',
            templateUrl: 'product-title.html'
        };
    });

    restrict  : 'E'                      is the type of Directive (E for Element)
    emplateUrl: 'product-title.html'    is the URL of a template

    Within the product-title.html 

    <h3>
        {{product.name}}
        <em class="pull-right">$250.00</em>
    </h3>

Example of an Attribute Directive

    Custom Attribute Directive 

    <h3 product-title></h3>

    Within the app.js file, please checkt that dash in HTML translates to camelCase in javaScript

    app.directive('productTitle', function(){
        return {
            restrict: 'A',
            templateUrl: 'product-title.html'
        };
    });

    restrict  : 'A'                      is the type of Directive (A for Attribiut)
    emplateUrl: 'product-title.html'    is the URL of a template