Extend HTML, used as widgets often

AngularJS - What are Directives

  • AngularJS directives are markers on the DOM that tells the Angular compiler to attach behavior or transform the DOM element

  • Directives can be placed on the DOM as:

    • Element directives        <product-description></product-description>

    • Attribute directives    <H3 product-description></H3>

    • CSS class directives    <div class=“product-description”></div>

    • Comment directives

AngularJS - Built in Directives

•AngularJS provides a bunch of built in directives

•Some of these override built in HTML elements to provide additional functionality – like <form>

•Other directives are visible through the ng- prefix

Built-in Directives:

  • ng-href
  • ng-src
  • ng-disabled
  • ng-checked
  • ng-class
  • ng-style
  • ng-selected
  • ng-app
    • Defines an AngularJS application.
  • ng-controller
    • Defines the controller.
  • ng-show
  • ng-hide
  • ng-model
    • Binds the value of HTML controls (input, select, text-area) to application data.
  • ng-bind
    • Binds application data to the HTML view.
  • ng-init
    • Initializes AngularJS application variables.
  • ng-modules
    • Define AngularJS applications

AngularJS - Types of Directives

•Element Directive


•Comment Directive


•Attribute Directive

<H3 product-description></H3>•

•Class Directive

<div class=“product-description”></div>


AngularJS - How Directives are Instantiated

•Angular’s compiler scans the DOM looking for Directives

•Directives can be declared a few different ways

AngularJS - Creating a Custom Controller for A Directive

•Directives can specify a Controller using the “controller” property

•Syntax “Controller as “ helps namespace the scope

•Syntax “Controller as” injects scope, binding the Controller to the current scope