Edition of existing tag names (client)

docs-web/src/main/webapp/js/directive/InlineEdit.js

@@ -0,0 +1,56 @@
+'use strict';
+
+/**
+ * Inline edition directive.
+ * Thanks to http://jsfiddle.net/joshdmiller/NDFHg/
+ */
+App.directive('inlineEdit', function() {
+  return {
+    restrict: 'E',
+    scope: {
+      value: '=',
+      editCallback: '&onEdit'
+    },
+    template: '<span ng-click="edit()" ng-bind="value"></span><input type="text" ng-model="value" />',
+    link: function (scope, element, attrs) {
+      // Let's get a reference to the input element, as we'll want to reference it.
+      var inputElement = angular.element(element.children()[1]);
+      var el = inputElement[0];
+      
+      // This directive should have a set class so we can style it.
+      element.addClass('inline-edit');
+      
+      // Initially, we're not editing.
+      scope.editing = false;
+      
+      // ng-click handler to activate edit-in-place
+      scope.edit = function () {
+        scope.editing = true;
+        scope.oldValue = el.value;
+        
+        // We control display through a class on the directive itself. See the CSS.
+        element.addClass('active');
+        
+        // And we must focus the element. 
+        // `angular.element()` provides a chainable array, like jQuery so to access a native DOM function, 
+        // we have to reference the first element in the array.
+        el.focus();
+        el.selectionStart = 0;
+        el.selectionEnd = el.value.length;
+      };
+      
+      // When we leave the input, we're done editing.
+      inputElement.on('blur', function() {
+        scope.editing = false;
+        element.removeClass('active');
+        
+        // Invoke parent scope callback
+        if (scope.editCallback && scope.oldValue != el.value) {
+          scope.$apply(function() {
+            scope.editCallback();
+          });
+        }
+      });
+    }
+  };
+});