AngularJS Email Filter in CoffeeScript

AngularJS 1.2 is a nice and simple framework to create web applications. One hurdle I just went thru is to create a filter to convert an email to a clickable link. To use this you will need to include “angular-sanitize.js” to get your html approved else it’s considered unsafe.

Include the sanitize JS file in your main HTML:

<script src="vendor/angular/1.2.0-rc.2/angular-sanitize.js"></script>

Then in CoffeeScript add it to your app’s module:

ng = angular.module "myApp", ['ngSanitize']

Then add this filter to your config code:

ng = ng.filter "email", () -> 
   (text) -> 
      '<a href="mailto:'+text+'">'+text+'</a>'

Finally use it in anywhere in your HTML as an “ng-bind-html”:

<span ng-bind-html="data.email | email"></span>

Comments are closed.