fix(bind-*): zone.run scope.apply on bind- change events

rkirov · rkirov · commit 77fdc617aa8b · 2014-09-12T13:54:52.000-07:00
Due to dart bug, events registered with addEventListener do no fire
scope.apply().

Adds an example of an affected polymer component.
diff --git a/example/web/index.html b/example/web/index.html
@@ -9,6 +9,7 @@
       <li><a href="paper.html">paper.html</a></li>
       <li><a href="form.html">form.html</a></li>
       <li><a href="maps.html">maps.html</a></li>
+      <li><a href="paper_radio_group.html">paper_radio_group.html</a></li>
     </ul>
   </body>
 </html>
diff --git a/example/web/paper_radio_group.dart b/example/web/paper_radio_group.dart
@@ -0,0 +1,19 @@
+import 'package:angular/angular.dart';
+import 'package:angular/application_factory.dart';
+
+import 'dart:html';
+
+@Component(
+  selector: 'cmp',
+  template: '<paper-radio-group bind-selected="cmp.insertOption"> <paper-radio-button name="asis" label="Insert as is"></paper-radio-button> <paper-radio-button name="duplicate" label="Insert as duplicate"></paper-radio-button> </paper-radio-group> {{cmp.insertOption}}',
+  publishAs: 'cmp'
+)
+class Cmp {
+  Object insertOption;
+}
+
+main() {
+  applicationFactory()
+      .addModule(new Module()..bind(Cmp))
+      .run();
+}
diff --git a/example/web/paper_radio_group.html b/example/web/paper_radio_group.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Paper radio group example</title>
+    <!-- 0. bower install; pub serve -->
+    <!-- 1. Load platform.js for polyfill support. -->
+    <script src="bower_components/platform/platform.js"></script>
+
+    <!-- 2. Use an HTML Import to bring in the element. -->
+    <link rel="import"
+          href="bower_components/paper-radio-group/paper-radio-group.html">
+</head>
+<body>
+<cmp></cmp>
+<!-- needed for the getter extractor -->
+{{cmp}} {{insertOption}}
+<script type="application/dart" src="paper_radio_group.dart"></script>
+<script src="packages/browser/dart.js"></script>
+</body>
+</html>
diff --git a/lib/core_dom/element_binder.dart b/lib/core_dom/element_binder.dart
@@ -305,11 +305,16 @@ class ElementBinder {
     });
 
     if (bindAssignableProps.isNotEmpty) {
-      node.addEventListener('change', (_) {
-        bindAssignableProps.forEach((propAndExp) {
-          propAndExp[1].assign(scope.context, jsNode[propAndExp[0]]);
-        });
-      });
+      // due to https://code.google.com/p/dart/issues/detail?id=17406
+      // we have to manually run the zone.
+      var zone = Zone.current;
+      node.addEventListener('change', (_) =>
+        zone.run(() =>
+          bindAssignableProps.forEach((propAndExp) =>
+            propAndExp[1].assign(scope.context, jsNode[propAndExp[0]])
+          )
+        )
+      );
     }
 
     if (onEvents.isNotEmpty) {
diff --git a/lib/core_dom/module_internal.dart b/lib/core_dom/module_internal.dart
@@ -35,6 +35,7 @@ import 'package:angular/directive/module.dart' show NgBaseCss;
 import 'package:angular/core_dom/css_shim.dart' as cssShim;
 
 import 'dart:collection';
+import 'dart:async';
 
 part 'animation.dart';
 part 'cookies.dart';
