Custom Directives in AngularJS

Custom Directives in AngularJS — a practical guide to AngularJS custom directives with clear examples you can reuse in real projects.

AngularJS Tutorial Series (31/99). Prefer one article? Read the complete AngularJS tutorial.

Short description

Use isolate scope bindings (@, =, &) for reusable APIs.

Directive sketch

angular.module('myApp').directive('appAlert', function () {
  return {
    restrict: 'E',
    scope: { message: '@' },
    template: '<div class="alert">{{ message }}</div>'
  };
});