Angular JS – Custom Directives

I can use custom directives to create my own markup elements handled by Angular. A directive is triggered by a particular element (a tag name, an attribute name or a class name) which is consequentially replaced with the template associated to the directive itself.

The kind of the elements which can trigger a directive depends on his restrict property: we can use “E” for elements, “A” for attributes or “C” for classes. We can also merge these values to have, for example, a directive restricted to “EA” = elements and attributes. Is also possible to set the replace property to true (default = false). In this way the directive template will be inserted in place of the placeholder and not inside it.

The name of the directive determines the name of the tag/attribute/class which will trigger it. The only thing to consider is that capitalized letters will be resulting in a “-” separator. For example a directive named “myDirective” will be bound to elements with name “my-directive”.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>Angular JS</title>
</head>
<body data-ng-app="myApp">
    <div data-ng-controller="myController">
        <p>The full name is {{ firstName + " " + lastName }}</p>
    </div>
    <hr />
 
    <!--
        This will be replaced with the template of the "MyDirective" directive
        -->
    <h3>Element Directive</h3>
    <my-directive></my-directive>
    <hr />
 
    <!--
        This will be replaced with the template of the "MyDirective2" directive
        -->
    <h3>Attribute Directive</h3>
    <div my-directive2></div>
    <hr />
 
    <!--
        This will be replaced with the template of the "MyDirective3" directive
        -->
    <h3>Class Directive</h3>
    <div class="my-directive3"></div>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
 
    <script type="text/javascript">
        angular.module("myApp", ["myApp.controllers", "myApp.directives"]);
        angular.module("myApp.controllers", []);
        angular.module("myApp.directives", []);
 
        angular.module("myApp.controllers").controller("myController", function ($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        });
 
        angular.module("myApp.directives").directive("myDirective", function () {
            return {
                restrict: "E",
                template: "<div>This is a directive which affects elements</div>"
            };
        });
 
        angular.module("myApp.directives").directive("myDirective2", function () {
            return {
                restrict: "A",
                template: "<div>This is a directive which affects attributes</div>"
            };
        });
 
        angular.module("myApp.directives").directive("myDirective3", function () {
            return {
                restrict: "C",
                template: "<div>This is a directive which affects classes</div>"
            };
        });
    </script>
</body>
</html>

Using a dedicated template file

If the template is really small we can define it as a string inside the template property, like in this case. If it’s more large or complex is better to put it inside a dedicated HTML file and to refer it with the templateUrl property, to use instead of the template property.

angular.module("myApp.directives").directive("myDirective", function () {
    return {
        restrict: "E",
        templateUrl: "Templates/Default09/myDirective.html"
    };
});

Removing the directive tag

With an element directive (restrict “E”) the Angular default behavior is to leave the directive’s tag as container for its template. Often this is not a standard HTML tag, so is a good idea to tell Angular to remove it, keeping just the template content. To do this we have to specify the property replace: true.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s