Custom Directives in AngularJS

Key Concepts

Custom Directives in AngularJS allow you to extend HTML with new attributes and elements. They are used to create reusable components and to encapsulate complex DOM manipulations and behavior. Custom Directives can be of three types: Element Directives, Attribute Directives, and Class Directives.

1. Element Directives

Element Directives are used to create new HTML elements. They are defined using the restrict: 'E' option. Element Directives are ideal for creating custom UI components that can be used throughout your application.

Example:

        <my-custom-element></my-custom-element>
    

Consider Element Directives as building blocks for your application. Just as you use standard HTML elements like <div> and <span>, you can create custom elements like <my-custom-element> to build complex UIs.

2. Attribute Directives

Attribute Directives are used to add behavior to existing HTML elements. They are defined using the restrict: 'A' option. Attribute Directives are useful for extending the functionality of standard HTML elements without creating new elements.

Example:

        <div my-custom-attribute></div>
    

Think of Attribute Directives as power-ups for your HTML elements. Just as you might add an onclick attribute to a button, you can add a custom attribute like my-custom-attribute to enhance its functionality.

3. Class Directives

Class Directives are used to add behavior to elements based on their CSS class. They are defined using the restrict: 'C' option. Class Directives are useful for applying behavior to multiple elements that share the same CSS class.

Example:

        <div class="my-custom-class"></div>
    

Consider Class Directives as style guides for your elements. Just as you might apply a CSS class to style multiple elements, you can apply a custom class directive to add behavior to those elements.

4. Template Directives

Template Directives are used to define the HTML template that will be used by the directive. They are defined using the template or templateUrl option. Template Directives are essential for creating complex UI components that require custom HTML.

Example:

        app.directive('myCustomElement', function() {
            return {
                restrict: 'E',
                template: '<div>Custom Content</div>'
            };
        });
    

Think of Template Directives as blueprints for your custom elements. Just as you might use a blueprint to build a house, you can use a template directive to define the structure of your custom element.

5. Controller Directives

Controller Directives are used to define the behavior of the directive. They are defined using the controller option. Controller Directives are essential for creating complex UI components that require custom logic.

Example:

        app.directive('myCustomElement', function() {
            return {
                restrict: 'E',
                controller: function($scope) {
                    $scope.message = 'Hello from Controller!';
                },
                template: '<div>{{ message }}</div>'
            };
        });
    

Consider Controller Directives as the brains of your custom elements. Just as you might use a brain to control your body, you can use a controller directive to define the behavior of your custom element.