Implementing "input's type property CAN be changed"

modules/directives/input2/input2.js

@@ -0,0 +1,34 @@
+/*
+ * Defines the ui-input2 tag, attribute and class(restrict ECA). This allow an input property to be changed
+ */
+angular.module('ui.directives').directive('uiInput2', ['$compile', function($compile) {
+  return {
+    restrict: 'ECA',
+    replace: true,
+    template: '<span />',
+    link: function(scope, iElement, iAttrs, controller) {
+      var clone = (function() {
+        var cursor = iElement;
+        return function(type) {
+          var input = angular.element('<input type="' + type + '" />');
+          angular.forEach(iAttrs.$attr, function(v,k) {
+            if (v != 'type') {
+              input.attr(v, iAttrs[k]);
+            }
+          });
+          input.removeAttr('ui-input2');
+          cursor.after(input);
+          cursor.remove();
+          cursor = input;
+          return input;
+        };
+      })();
+
+      clone('text');
+      iAttrs.$observe('type', function(type) {
+        var input = clone(type || 'text');
+        $compile(input)(scope);
+      });
+    }
+  };
+}]);

modules/directives/input2/test/input2Spec.js

@@ -0,0 +1,47 @@
+describe('ui-input2', function () {
+  var scope, $compile, elm,
+      inputTypes = ['text', 'number', 'checkbox', 'radio'];
+
+  beforeEach(module('ui.directives'));
+  beforeEach(inject(function ($rootScope, _$compile_) {
+    function makeInput (type) {
+      return $('<input type="' + type + '" class="' + type + '" ng-model="data" />');
+    }
+
+    scope = $rootScope.$new();
+    $compile = _$compile_;
+    elm = $('<div>');
+
+    angular.forEach(inputTypes, function(type) {
+      elm.append(makeInput(type));
+    });
+
+
+    var dynamic = makeInput('{{type}}');
+    dynamic.attr('ui-input2','');
+    dynamic.attr('name','dynamic');
+    dynamic.attr('class','dynamic');
+    elm.append(dynamic);
+
+    $compile(elm)(scope);
+  }));
+
+  function getDynamicInput() {
+    return $('.dynamic',elm).last();
+  }
+  function getInput(type) {
+    return $('.'+type);
+  }
+
+  it('should change a type property of input tag witout errors', function () {
+    // Default is text
+    expect(getDynamicInput().attr('type')).toBe('text');
+
+    angular.forEach(inputTypes, function(type) {
+      scope.$apply(function() {
+        scope.type = type;
+      });
+      expect(getDynamicInput().attr('type')).toBe(type);
+    });
+  });
+});