Directives in depth

About me

Pankaj Parkar

Asp.Net + AngularJS Developer

TSS Consultancy

Twitter, LinkedIn, Facebook, Stackoverflow

What is AngularJS?

  1. Two way binding
  2. Templates
  3. MVC
  4. Dependency Injection
  5. Directives

Overview of AngularJS

  1. Controllers
  2. Filters
  3. Directive
  4. Service/Factory/Provider

What is angular directive?


  1. Directive can add specific behaviour to the DOM
  2. Allow us to create a reusable component
  3. Allow to extend the HTML to the DOM
  4. Provide control over DOM pre and post rendering.

Conventions to write directive​

  • HTML is case-insensitive, so directives in the DOM by lower-case forms, typically using dash-delimited.
  • Strip x- and data- from the front of the element/attribute
  • Convert the :, -, or _ -delimited name to camel case.

Example.

 

<div>
   Hello, I'm <input ng-model="name">
   <span ng-bind="name"><span>
   <span ng:bind="name"><span>
   <span ng_bind="name"><span>
   <span data-ng-bind="name"><span>
   <span x-ng-bind="name"><span>
</div>

Key AngularJS directives

Templates

ng-disabled
ng-cloak
ng-show
ng-hide
ng-if
ng-repeat
ng-switch
ng-view

Application

ng-app
ng-controller

Data Binding

ng-bind
ng-href
ng-bind-html
ng-href
ng-init
ng-model

Forms

ng-form
ng-minlength
ng-maxlength
ng-pattern
ng-submit
ng-enabled
ng-disabled
ng-readonly

Behaviour

ng-blur
ng-change
ng-click
ng-focus
ng-mouseenter
ng-mouseout
ng-keyup
ng-keydown

Various options of directive

  • template / templateUrl
  • restrict
  • replace
  • compile and link function
  • scope
  • controller
  • priority
  • transclusion
  • require

​​

app.directive('myDirective', function(){
   return {
      restrict: 'AECM', //defaults to a
      template: '<div>My HTML</div>',
      //templateUrl: 'myDirective.html',
      replace: false //or true,
      link: function(){
         //code here
      }
   }
})

Template, restrict & replace option of directive

Plunkr Demo

Directive

Markup

<div my-directive></div>
<my-directive></my-directive>
<div class="my-directive"></div>
<!-- directive: my-directive -->
app.directive('myDirective', function(){
   return {
      restrict: 'AECM',
      template: '<div>My HTML</div>',
      replace: false,
      compile: function(element, attrs){
         //it is raw DOM, gets called while initializing DOM
         //its a DOM which going for compilation, here we don't have scope available
         //here its safe to manipulate DOM before it gets transform
       return {
         pre: function(scope, element, attrs, ctrl){
            //this function has scope property to change in scope variables if any,
            //this gets called when binding the scope to the DOM
            //it has scope available in it, used in some special cases 
            //like binding some event/watcher before rendering of inner content
         },
         post: function(scope, element, attrs, ctrl){
            //here you can find all the bindings are in place
            //generally you should use this function while dealing with DOM.
            //because inner content has been rendered.
         }
      }
   }
});

compile & link function

Demo Plunkr 
app.directive('myDirective', function(){
   return {
      restrict: 'AECM',
      template: '<div>My HTML</div>',
      replace: false,
      compile: function(element, attrs){
         console.log("Get called first");
         return {
           pre:{
              console.log("Get called third");
           },
           post:{
              console.log("Get called forth");
           },
         }
     },
     controller: function(){
        console.log("Get called 2nd");
     }
});

compile & link function Continued..

scope

There are 3 types of scope that you can use in angular directive

 

  1. scope: false // shareable scope
  2. scope: true  //prototypically inherited scope
  3. scope: {
        'twoWay': '=' // = stands for two way communication
        'oneWay': '@', // @ stands for one way communication
        '    expression': '&'  // & stands for expression
    }

Plunkr Demo

Controller & Priority

Text

app.directive('myDirective', function(){
   return {
      restrict: 'AECM',
      template: '<div>My HTML</div>',
      replace: false,
      link: function(scope, element, attrs){
         console.log("This is nothing but post link");
      },
      controller: function(){
         console.log("Controller get instantiated");
      },
      priority: '1',
      controllerAs: 'alias'
   }
})

Transclusion

Plunkr Demo

Photoframe

require

  • Require option is used for making communication between two directive by accessing its controller
  • Here you will understand when to use controller to while writing code for directive.

How directive will look in Angular 2?

  • There is no scope in Angular2, you will only find the web component

Angular2 Simple App in Plunkr

Question & Answer

References

Made with Slides.com