Tag Editor Demo

A native directive for editing and displaying tags

Edit Mode

<lvl-tag-editor
  use-default-css='true' ←'false' to provide your own styles
  focus-input='true' ←optional, include to grab focus 
  tags='tags' ←the array containing tags on the parent scope 
  on-hover='hover(tag, elementPos)' ←callback when mouse hovers over a tag 
  on-hover-out='hoverOut()' ←callback when mouse stops hovering over tag  
  on-validate='validate(tag)' ←callback before tag is added, return false to prevent 
></lvl-tag-editor>
					
  • Enter text in the input element
  • Press 'enter' or blur focus to add the tag
  • The tag 'flarn' fails validation
Invalid Tag The word 'flarn' cannot be used as a tag!

Read Only Mode

<lvl-tag-editor
  use-default-css='false' ←styles already present on the page
  read-only='true' ←enable read-only mode
  tags='tags' ←the array containing tags on the parent scope 
  on-hover='hover(tag, elementPos)' ←callback when mouse hovers over a tag 
  on-hover-out='hoverOut()' ←callback when mouse stops hovering over tag  
></lvl-tag-editor>

Page Script

angular
  .module('tagApp', ['lvl.services', 'lvl.directives.tageditor'])
  .controller('tagCtl', ['$scope', '$timeout', "uuid", function($scope, $timeout, uuid) {
  	$scope.selected = null;
  	
  	$scope.tags = [
  		{Name: "one", Id: uuid.new(), Description: "the one tag"}, 
  		{Name: "two", Id: uuid.new(), Description: "the two tag"},
  		{Name: "three", Id: uuid.new(), Description: "the three tag"}];
  
  	$scope.hover = function(tag, elementPos) {
  		$scope.selected = tag;
  		$scope.selectedPos = elementPos;
  	};
  
  	$scope.hoverOut = function() {
  		$scope.selected = null;
  	};
  
  	$scope.validate = function(tag) {
  		var isValid = (tag.Name != 'flarn');
  		if (!isValid) {
  			$scope.error = true;
  			$timeout(function() {
  				$scope.error = false;
  			}, 2500);
  		}
  
  		return isValid;
  	};
  
  }]);
						

Pop-up HTML

<div id="popup" ng-show="selected" style="border:2px brown solid;border-radius:15px;position:fixed;background-color:orange;padding:5px" ng-style="{top: (selectedPos.bottom + 2) + 'px', left: (selectedPos.left - 5) + 'px'}">
	<strong>Tag</strong>
	<br/>
	<pre style='border-radius:15px;background-color:orange;border-color:brown'>{{ selected | json }}</pre>

	<strong>Position</strong>
	<pre style='border-radius:15px;background-color:orange;border-color:brown'>{{ selectedPos | json }}</pre>
</div>