AngularJS: Custom Directives

by David Loo | Apr 5, 2015 | AngularJS

What is a custom directive?

In my last post I’ve described what’s a directive and the types of directives available in AngularJS. But in AngularJS you’re not restricted to what is available, you have the ability to create you own directive too.

What are the ingredients that makes up a custom directive?

A very basic custom directive will contains the module.directive API to register it. The first parameter is the name and the second parameter is the function that returns configuration object.

Below is I have created an directive that is an element with a template that display a simple Hello, World! message in html.

angular.module('app', [])
.directive('helloWorld', function () {
    return {
        restrict: 'E',
        template: '<b>Hello, World!</b>'
    };
});

<hello-world></hello-world>

Let’s break it down. (more…)