feat(hg-model): basic mg-model support

mhevery · mhevery · commit ca003b2957db · 2013-06-28T22:11:52.000-07:00
diff --git a/demo/web/index.html b/demo/web/index.html
@@ -5,6 +5,10 @@
 </head>
 <body>
 <div  ng-app>
+    <h1>ng-model</h1>
+    <input type="text" ng-model="yourName">
+    <input type="text" ng-model="yourName">
+    Hello {{yourName}}!
     <h1>A Demo of the Bind Directive</h1>
     <div>
         <div ng-bind="greeting"></div>
diff --git a/lib/angular.dart b/lib/angular.dart
@@ -20,6 +20,7 @@ part 'directives/ng_cloak.dart';
 part 'directives/ng_controller.dart';
 part 'directives/ng_hide.dart';
 part 'directives/ng_if.dart';
+part 'directives/ng_model.dart';
 part 'directives/ng_mustache.dart';
 part 'directives/ng_repeat.dart';
 part 'directives/ng_show.dart';
@@ -139,6 +140,9 @@ class AngularModule extends Module {
     directive(NgIfAttrDirective);
     directive(NgRepeatAttrDirective);
     directive(NgShowAttrDirective);
+
+    directive(InputDirective);
+    directive(NgModel);
   }
 
   directive(Type directive) {
diff --git a/lib/directives/ng_model.dart b/lib/directives/ng_model.dart
@@ -0,0 +1,62 @@
+part of angular;
+
+/**
+ * Ng-model directive is responsible for reading/writing to the model.
+ * The directive itself is headless. (It does not know how to render or what
+ * events to listen for.) It is meant to be used with other directives which
+ * provide the rendering and listening capabilities. The directive itself
+ * knows how to convert the view-value into model-value and vice versa by
+ * allowing others to register converters (To be implemented). It also
+ * knwos how to (in)validate the model and the form in which it is declared
+ * (to be implemented)
+ */
+class NgModel {
+  static String $selector = '[ng-model]';
+
+  Scope scope;
+  ParsedFn getter;
+  ParsedAssignFn setter;
+
+  Function render = (value) => null;
+
+  NgModel(NodeAttrs attrs, Parser parser, Scope this.scope) {
+    getter = parser(attrs[this]);
+    setter = getter.assign;
+
+    scope.$watch(getter, (value) => render(value) );
+  }
+
+  // TODO(misko): right now viewValue and modelValue are the same,
+  // but this needs to be changed to support converters and form validation
+  get viewValue        => modelValue;
+  set viewValue(value) => modelValue = value;
+
+  get modelValue        => getter(scope);
+  set modelValue(value) => setter(scope, value);
+}
+
+/**
+ * The UI portion of the ng-model directive. This directive registers the UI
+ * events and provides a rendering function for the ng-model directive.
+ */
+class InputDirective {
+  static String $selector = 'input[ng-model]';
+
+  dom.InputElement inputElement;
+  NgModel ngModel;
+  Scope scope;
+
+  InputDirective(dom.Element this.inputElement, NgModel this.ngModel, Scope this.scope) {
+    ngModel.render = (value) => inputElement.value = value == null ? '' : value;
+
+    inputElement.onChange.listen(_relaxFnArgs(processValue));
+    inputElement.onKeyDown.listen((e) => new async.Timer(Duration.ZERO, processValue));
+  }
+
+  processValue() {
+    var value = inputElement.value;
+    if (value != ngModel.viewValue) {
+      scope.$apply(() => ngModel.viewValue = value);
+    }
+  }
+}
diff --git a/test/directives/ng_model_spec.dart b/test/directives/ng_model_spec.dart
@@ -0,0 +1,32 @@
+import "../_specs.dart";
+import "../_test_bed.dart";
+
+main() =>
+describe('ng-model', () {
+  TestBed _;
+
+  beforeEach(beforeEachTestBed((tb) => _ = tb));
+
+  describe('type="text"', () {
+    it('should update input value from model', inject(() {
+      _.compile('<input ng-model="model">');
+      _.rootScope.$digest();
+
+      expect(_.rootElement.prop('value')).toEqual('');
+
+      _.rootScope.$apply('model = "misko"');
+      expect(_.rootElement.prop('value')).toEqual('misko');
+    }));
+
+    it('should update model from the input value', inject(() {
+      _.compile('<input ng-model="model" probe="p">');
+      Probe probe = _.rootScope.p;
+      var ngModel = probe.directive(NgModel);
+      var input = probe.directive(InputDirective);
+
+      probe.element.value = 'abc';
+      input.processValue();
+      expect(_.rootScope.model).toEqual('abc');
+    }));
+  });
+});
