Demo for link function in Angular Directive.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Angular Directives - link function</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="demoApp">
    <div my-directive></div>
</body>

</html>

var app = angular.module('demoApp', []);

app.directive('myDirective', function(){
  return {
    restrict: 'AE',
    template: "<p class='demoLink'>Click here to change text's style.</p>",
    link: function($scope,$element,$attrs){
      $element.on('click', function(){
        if($element.hasClass('zoomIn')){
          $element.css('color','green');
          $element.css('font-size','2em');
          $element.css('font-weight','bold');
          $element.removeClass('zoomIn');
        }else{
          $element.css('color','black');
          $element.css('font-size','1em');
          $element.css('font-weight','normal');
          $element.addClass('zoomIn');
        }
      });
    }
  }
})

/* Styles go here */
.demoLink{
  transition: all linear 1s;
}

Author: written by XTai

Date: 28/11/2014

ver: 1.0

This is demo for link function in Angular Directive.