Post
Ask Question

Email Tokenizer for AngularJS Directive

Introduction

While implementing Single Page Application through WebAPI and AngularJS, You came across number of times to use filters and directive in order to meet requirements specified by clients, below code snippet, tokenize input and display them in separate block within a specific placeholder, however it checks the input is valid email address first and then the input token is not repetitive within same placeholder.

  1. <body ng-app="tokenizer">   
  2. <div ng-controller="tokenizerController">   
  3. <tag-input taglist='email' placeholder="Emails"></tag-input>   
  4. </div>   
  5. </body>   
  1. var sample = angular.module('tokenizer', ['ngRoute']);  
  2.   
  3.   
  4. sample.controller('tokenizerController', function($scope)   
  5. {  
  6.   
  7. });  
  8.   
  9. sample.directive('tagInput', function()   
  10. {  
  11.     return {  
  12.         restrict: 'E',  
  13.         scope: {  
  14.             inputTags: '=taglist',  
  15.             autocomplete: '=autocomplete'  
  16.         },  
  17.         link: function($scope, element, attrs)   
  18.         {  
  19.             $scope.defaultWidth = 200;  
  20.             $scope.tagText = '';  
  21.             $scope.placeholder = attrs.placeholder;  
  22.             $scope.tagArray = function() {  
  23.                 if ($scope.inputTags === #ff0000)  
  24.                 {  
  25.                     return [];  
  26.                 }  
  27.                 return $scope.inputTags.split(',').filter(function(tag)   
  28.                 {  
  29.                     return tag !== "";  
  30.                 });  
  31.             };  
  32.             $scope.addTag = function()   
  33.             {  
  34.                 var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;  
  35.                 var tagArray;  
  36.                 if ($scope.tagText.length === 0)   
  37.                 {  
  38.                     return;  
  39.                 }  
  40.                 if (!EMAIL_REGEXP.test($scope.tagText))   
  41.                 {  
  42.                     return $scope.tagText = "";  
  43.                 }  
  44.                 tagArray = $scope.tagArray();  
  45.                 if (!(tagArray.indexOf($scope.tagText) >= 0))   
  46.                 {  
  47.                     tagArray.push($scope.tagText);  
  48.                     $scope.inputTags = tagArray.join(',');  
  49.                 }  
  50.                 return $scope.tagText = "";  
  51.             };  
  52.             $scope.deleteTag = function(key)   
  53.             {  
  54.                 var tagArray;  
  55.                 tagArray = $scope.tagArray();  
  56.                 if (tagArray.length > 0 && $scope.tagText.length === 0 && key === #ff0000) {  
  57.                     tagArray.pop();  
  58.                 } else {  
  59.                     if (key !== undefined)   
  60.                     {  
  61.                         tagArray.splice(key, 1);  
  62.                     }  
  63.                 }  
  64.                 return $scope.inputTags = tagArray.join(',');  
  65.             };  
  66.             $scope.$watch('tagText', function(newVal, oldVal)  
  67.             {  
  68.                 var tempEl;  
  69.                 if (!(newVal === oldVal && newVal === undefined))   
  70.                 {  
  71.                     tempEl = $("<span>" + newVal + "</span>").appendTo("body");  
  72.                     $scope.inputWidth = tempEl.width() + 5;  
  73.                     if ($scope.inputWidth < $scope.defaultWidth)  
  74.                     {  
  75.                         $scope.inputWidth = $scope.defaultWidth;  
  76.                     }  
  77.                     return tempEl.remove();  
  78.                 }  
  79.             });  
  80.             element.bind("keydown", function(e)   
  81.             {  
  82.                 var key;  
  83.                 key = e.which;  
  84.                 if (key === 9 || key === 13)  
  85.                 {  
  86.                     e.preventDefault();  
  87.                 }  
  88.                 if (key === 8) {  
  89.                     return $scope.$apply('deleteTag()');  
  90.                 }  
  91.             });  
  92.             return element.bind("keyup", function(e)  
  93.             {  
  94.                 var key;  
  95.                 key = e.which;  
  96.                 if (key === 9 || key === 13 || key === 188)   
  97.                 {  
  98.                     e.preventDefault();  
  99.                     return $scope.$apply('addTag()');  
  100.                 }  
  101.             });  
  102.         },  
  103.         template: "<div class='tag-input-ctn'><div class='input-tag' data-ng-repeat=\"tag in tagArray()\">{{tag}}<div class='delete-tag' data-ng-click='deleteTag($index)'>×</div></div><input type='text' data-ng-style='{width: inputWidth}' data-ng-model='tagText' placeholder='{{placeholder}}'/></div>"  
  104.     };  
  105. });  

The output will be like
 
 
Next Recommended Reading Account Confirmation with an ASP.NET MVC Identity using an Email Template