Custom Tag Directive

by rocketegg0

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<div ng-controller="myController">
    <div class="panel panel-default">
        <div class="panel-heading">
            Tags Directive
        </div>
        <div class="panel-body">
            <m-tag ng-model="tags" read="false"></m-tag>
        </div>
        <div class="panel-body">
            {{tags}}
        </div>
    </div>
</div>

    <!-- tag.html -->
    <script type="text/ng-template" id="tag.html">
        <div class="input-group" ng-show="!read">
            <input type="text" name="temptags" ng-model="temptags" class="form-control"  placeholder="Enter comma separated tags" ng-class="{'haserror':!validate(temptags)}" style="margin-bottom:0px"/>
            <span ng-show="!validate(temptags)" class="label label-danger">Please only use regular characters for tags (a-z)</span>
            <div class="input-group-btn" style="vertical-align:top">
                <button class="btn btn-inline" ng-click="appendTags(temptags)">Add</button>
            </div>
        </div>
        
        <div class="margintopten">
            <span class="label label-default normal tag marginrightten" ng-repeat="tag in tags"><a ng-click="deleteTag(tag)" ng-if="!read"><i class="fa fa-times-circle" ng-click="deleteTag(tag)"></i></a>  {{tag}}</span>
        </div>
    </script>

CSS

.input-group .form-control.haserror, .form-light .form-control:focus.haserror {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}

.wp-theme-1 .btn.btn-inline {
  vertical-align: top;
  background: bisque;
  border: 1px solid #ccc;
  box-shadow: none;
}

.label.tag {
  background-color: #ddd;
  border-color: #999;
  border: 1px solid #999;
  color: #222;
  font-weight: normal;
}

.marginrightten {
  margin-right:10px;
}

JavaScript

var mymodule = angular.module('mymodule', ['ngSanitize']);

mymodule.controller("myController", function ($scope) {
    $scope.tags = ['one', 'two', 'three'];
});

mymodule.directive("mTag", function () {
    return {
        restrict: 'E',
        scope: {
            read: '=',  //read or write (I provide an API in case the user only wants to show the tags and not provide the input
            tags: '=ngModel'  //the ng-model binding
        },
        controller: function ($scope) {

            /* Exposed Methods */
            $scope.validate = function(string) {
                if (!string || string.length === 0) {
                    return true;
                } else {
                    return string.match(/^\s?[A-Z,\s]+$/i);	
                }
            };
        
            //Adds the tag to the set
            function addTag (string) {
                if ($scope.tags.indexOf(string.toLowerCase()) === -1) {
                    $scope.tags.push(string);
                }
            };
        
            //When the user clicks "Add", all unique tags will be added
            $scope.appendTags = function(string) {
                if ($scope.validate(string)) {
                    if (string) {
                        var split = string.split(',');
        
                        split.forEach(function(tag) {
                            if (tag.trim().length > 0) {
                                addTag(tag.trim());
                            }
                        });
        
                        $scope.temptags = "";
                    }
                }
            };
        
            //When the user wants to delete a tag
            $scope.deleteTag = function(tag) {
                if (tag) {
                    var idx = $scope.tags.indexOf(tag);
                    if (idx > -1) {
                        $scope.tags.splice(idx, 1);
                    }
                }
            };
        },
        templateUrl:...