feat(directives): Add support for contenteditable with ng-model

lib/directive/module.dart

@@ -58,6 +58,7 @@ class NgDirectiveModule extends Module {
     value(TextAreaDirective, null);
     value(InputSelectDirective, null);
     value(OptionValueDirective, null);
+    value(ContentEditableDirective, null);
     value(NgModel, null);
     value(NgSwitchDirective, null);
     value(NgSwitchWhenDirective, null);

lib/directive/ng_model.dart

@@ -325,3 +325,23 @@ class InputRadioDirective {
     });
   }
 }
+
+/**
+ * Usage (span could be replaced with any element which supports text content, such as `p`):
+ *
+ *     <span contenteditable= ng-model="name">
+ *
+ * This creates a two way databinding between the expression specified in
+ * ng-model and the html element in the DOM.  If the ng-model value is
+ * `null`, it is treated as equivalent to the empty string for rendering
+ * purposes.
+ */
+@NgDirective(selector: '[contenteditable][ng-model]')
+class ContentEditableDirective extends _InputTextlikeDirective {
+  ContentEditableDirective(dom.Element inputElement, NgModel ngModel, Scope scope):
+      super(inputElement, ngModel, scope);
+
+  // The implementation is identical to _InputTextlikeDirective but use innerHtml instead of value
+  get typedValue => (inputElement as dynamic).innerHtml;
+  set typedValue(String value) => (inputElement as dynamic).innerHtml = (value == null) ? '' : value;
+}

test/directive/ng_model_spec.dart

@@ -44,7 +44,6 @@ describe('ng-model', () {
       var input = probe.directive(InputTextDirective);
       input.processValue();
       expect(_.rootScope.model).toEqual('def');
-
     }));
 
     it('should write to input only if value is different', inject(() {
@@ -438,5 +437,31 @@ describe('ng-model', () {
       expect(blueBtn.checked).toBe(false);
     }));
   });
+
+  describe('contenteditable', () {
+    it('should update content from model', inject(() {
+      _.compile('<p contenteditable ng-model="model">');
+      _.rootScope.$digest();
+
+      expect((_.rootElement as dom.Element).text).toEqual('');
+
+      _.rootScope.$apply('model = "misko"');
+      expect((_.rootElement as dom.Element).text).toEqual('misko');
+    }));
+
+    it('should update model from the input value', inject(() {
+      _.compile('<p contenteditable ng-model="model">');
+      Element element = _.rootElement;
+
+      element.innerHtml = 'abc';
+      _.triggerEvent(element, 'change');
+      expect(_.rootScope.model).toEqual('abc');
+
+      element.innerHtml = 'def';
+      var input = ngInjector(element).get(ContentEditableDirective);
+      input.processValue();
+      expect(_.rootScope.model).toEqual('def');
+    }));
+  });
 
 });