dart-archive · jbdeboer · Jul 25, 2014 · Jul 25, 2014 · vicb · Jul 30, 2014
diff --git a/example/bower.json b/example/bower.json
@@ -0,0 +1,24 @@
+{
+  "name": "paper-example",
+  "version": "0.0.1",
+  "homepage": "https://github.com/angular/angular.dart",
+  "authors": [
+    "James deBoer <[email protected]>"
+  ],
+  "description": "Paper with AngularDart",
+  "main": "web/index.html",
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#~0.3.4",
+    "paper-elements": "Polymer/paper-elements#~0.3.4",
+    "core-elements": "Polymer/core-elements#~0.3.4"
+  }
+}
diff --git a/example/web/bower_components b/example/web/bower_components
@@ -0,0 +1 @@
+../bower_components/
diff --git a/example/web/index.html b/example/web/index.html
@@ -6,6 +6,7 @@
       <li><a href="hello_world.html">hello_world.html</a></li>
       <li><a href="todo.html">todo.html</a></li>
       <li><a href="shadow_dom_components.html">shadow_dom_components.html</a></li>
+      <li><a href="paper_progress.html">paper_progress.html</a></li>
     </ul>
   </body>
 </html>
diff --git a/example/web/paper_progress.dart b/example/web/paper_progress.dart
@@ -0,0 +1,13 @@
+import 'package:angular/angular.dart';
+import 'package:angular/application_factory.dart';
+
+
+main() {
+  var injector = applicationFactory()
+      .run();
+  var scope = injector.get(Scope);
+  scope.context['text'] = "Hello future";
+  scope.context['max'] = 20;
+  scope.context['curValue'] = 12;
+  scope.apply();
+}
diff --git a/example/web/paper_progress.html b/example/web/paper_progress.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <!-- 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-progress/paper-progress.html">
+    <script type="application/dart" src="paper_progress.dart"></script>
+    <script src="packages/browser/dart.js"></script>
+    <style>
+        div { padding: 0.25em; }
+    </style>
+  </head>
+  <body>
+    <h2>A quick demo of the Polymer paper-progress widget in an AngularDart app.</h2>
+    <p>The max ({{max}}) and value ({{curValue}}) properties are bound through bind-* semantics</p>
+
+    <p>Text from Angular: <b>{{text}}</b></p>
+
+    <div>
+      <paper-progress bind-max=max bind-value=curValue></paper-progress>
+    </div>
+
+    <p>
+       Change the value through an ng-model bound input box:
+       <input type="text" ng-model="curValue">
+    </p>
+  </body>
+</html>
diff --git a/lib/core_dom/element_binder.dart b/lib/core_dom/element_binder.dart
@@ -62,7 +62,7 @@ class ElementBinder {
   }
 
   bool get hasDirectivesOrEvents =>
-      _usableDirectiveRefs.isNotEmpty || onEvents.isNotEmpty;
+      _usableDirectiveRefs.isNotEmpty || onEvents.isNotEmpty || bindAttrs.isNotEmpty;
 
   void _bindTwoWay(tasks, AST ast, scope, directiveScope,
                    controller, AST dstAST) {
@@ -283,6 +283,14 @@ class ElementBinder {
 
     _link(nodeInjector, scope, nodeAttrs);
 
+    var jsNode;
+    bindAttrs.forEach((String prop, ast) {
+      if (jsNode == null) jsNode = new js.JsObject.fromBrowserObject(node);
+      scope.watchAST(ast, (v, _) {
+        jsNode[prop] = v;
+      });
+    });
+
     if (onEvents.isNotEmpty) {
       onEvents.forEach((event, value) {
         view.registerEvent(EventHandler.attrNameToEventName(event));

diff --git a/test/core_dom/web_components_spec.dart b/test/core_dom/web_components_spec.dart
@@ -0,0 +1,62 @@
+library angular.dom.web_components_spec;
+
+import '../_specs.dart';
+import 'dart:js' as js;
+
+registerElement(String name, prototype) {
+  return (new js.JsObject.fromBrowserObject(document)).callMethod('registerElement',
+          [name, new js.JsObject.jsify({"prototype": prototype })]);
+}
+
+
+
+main() {
+  describe('WebComponent support', () {
+    TestBed _;
+
+    customProp(String prop, [elt]) {
+      if (elt == null) elt = _.rootElement;
+      return (new js.JsObject.fromBrowserObject(elt))[prop];
+    }
+
+    beforeEach((TestBed tb) {
+      _ = tb;
+    });
+
+    it('should create custom elements', () {
+      registerElement('tests-basic', {'prop-x': 6});
+
+      // Create a web component
+      _.compile('<tests-basic></tests-basic>');
+      expect(customProp('prop-x')).toEqual(6);
+    });
+
+
+    it('should bind to Custom Element properties', () {
+      registerElement('tests-bound', {'prop-y': 10});
+      _.compile('<tests-bound bind-prop-y=27></tests-bound>');
+
+      // Scope has not been digested yet
+      expect(customProp('prop-y')).toEqual(10);
+
+      _.rootScope.apply();
+      expect(customProp('prop-y')).toEqual(27);
+    });
+
+
+    it('should bind to a non-existent property', () {
+      registerElement('tests-empty', {});
+      _.compile('<tests-empty bind-new-prop=27></tests-empty>');
+      _.rootScope.apply();
+      expect(customProp('new-prop')).toEqual(27);
+    });
+
+    it('should bind to both directives and properties', () {
+      registerElement('tests-double', {});
+      _.compile('<tests-double ng-bind bind-ng-bind="\'hello\'"></tests-double>');
+      _.rootScope.apply();
+      expect(customProp('ng-bind')).toEqual("hello");
+      expect(_.rootElement).toHaveText('hello');
+    });
+  });
+}