Post
Ask Question

Custom Filters in AngularJS

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:

  • ng-app − This directive starts an AngularJS Application.(without this,all angularjs code is nothing.).
  • ng-init − This directive initializes application data.
  • ng-model − This directive defines the model that is variable to be used in AngularJS.(for data binding).
  • ng-repeat − This directive repeats html elements for each item in a collection.(Loop purpose).

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;    
  4.     
  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}}    
  24.     
  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>    
  32.     
  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}}    
  38.     
  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 |    
  46.     
  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 |    
  64.     
  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.