We will look and discuss how Directives Work in AngularJS in very easy way.

So first of all What is the Directive in AngularJS, then we will try to create sample so that we can use directive in our application.

"In Simple words, AngularJS directives are used to extend HTML.".

What does that mean,now here we discuss.

There are many built in directives in Angularjs ,but we can create custom directives for our Use. Like:

Above are all built in Directives, Now we will create CustomDirective.

I am working on project where we need to show "Tooltip",so we will implement this.

Step 1:

In front end,Add

  1. <span class="info_icon" style="white-space: nowrap; vertical-align: middle; float: left;"><%-- showhovertable is Custom Directive for tooltip hide/show --%>
  2. <div class="appTooltipDiv" style="display: none;" showhovertable>
  3. <table id="tbltooltip" class="tooltip" style="position: absolute; margin: 0px 0px 0px 12px;
  5. z-index: 1; border-collapse: initial; width: auto;">
  6. <tr>
  7. <td class="apptooltipheader">Date:</td>
  8. <td class="apptooltipheaderData">
  9. <b>{{x.APP_DATE}}</b>
  10. </td>
  11. <td class="apptooltipheader">Time:</td>
  12. <td class="apptooltipheaderData">
  13. <b>{{x.TIME_FROM}}</b>
  14. </td>
  15. </tr>
  16. <tr>
  17. <td class="apptooltipheader">Status:</td>
  18. <td class="apptooltipheaderData">
  19. <b>{{x.APPOINTMENT_STATUS_DESCRIPTION}}</b>
  20. </td>
  21. <td class="apptooltipheader">Notes:</td>
  22. <td style="white-space: pre; padding: 5px 10px 5px 5px;">
  23. <b>{{x.NOTES|limitTo:70}}
  25. </b>
  26. </td>
  27. </tr>
  28. <tr>
  29. <td class="apptooltipheader">Reason:</td>
  30. <td style="white-space: pre; padding: 5px 10px 5px 5px;">
  31. <b>
  33. {{x.REASON_DESCRIPTION}}</b>
  34. </td>
  35. <td class="apptooltipheader">Provider:</td>
  36. <td style="padding: 5px 10px 5px 5px;">
  37. <b>{{x.PROVID_LNAME}},{{x.PROVID_FNAME}}
  39. </b>
  40. </td>
  41. </tr>
  42. <tr>
  43. <td style="white-space: nowrap; padding: 5px 5px 5px 10px;">Date Created:</td>
  44. <td class="apptooltipheaderData">
  45. <b>{{x.Created_Date | AppDateFilter |
  47. date:'MM/dd/yyyy'}}</b>
  48. </td>
  49. <td class="apptooltipheader">Location:</td>
  50. <td style="padding: 5px 10px 5px 5px;">
  51. <b>{{x.LOCATION_NAME}}</b>
  52. </td>
  53. </tr>
  54. <tr>
  55. <td class="apptooltipheader">Created By:</td>
  56. <td class="apptooltipheaderData">
  57. <b>{{x.Created_By}}</b>
  58. </td>
  59. </tr>
  60. <tr>
  61. <td style="white-space: nowrap; padding: 5px 5px 5px 10px;">Date Modified:</td>
  62. <td class="apptooltipheaderData">
  63. <b>{{ x.Modified_Date | AppDateFilter |
  65. date:"MM/dd/yyyy"}}</b>
  66. </td>
  67. </tr>
  68. <tr>
  69. <td class="apptooltipheader">Modified By:</td>
  70. <td class="apptooltipheaderData">
  71. <b>{{x.Modified_By}}</b>
  72. </td>
  73. </tr>
  74. </table>
  75. </div>
  76. </span>
Showhovertable will be Our Directive Name ,Now in Our App.js:
  1. function ()
  2. {
  3. var app = angular.module("myApp", []);
  4. // Directive for ToolTip
  5. app.directive('showhovertable', function ()
  6. {
  7. return {
  8. link: function (scope, element, attrs)
  9. {
  10. element.parent().bind('mouseenter', function ()
  11. {
  12. element.show();
  13. });
  14. element.parent().bind('mouseleave', function ()
  15. {
  16. element.hide();
  17. });
  18. }
  19. }
  20. });
  21. });
Now save it and refresh the page, on hover <span>, we get Tooltip.