Skip to content
This repository has been archived by the owner on Feb 22, 2018. It is now read-only.

Commit

Permalink
feat(element binder): Bind to Web Component properties
Browse files Browse the repository at this point in the history
Closes #1277
  • Loading branch information
jbdeboer committed Jul 30, 2014
1 parent 1ef882c commit c53dc77
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 3 deletions.
7 changes: 5 additions & 2 deletions example/web/paper_progress.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,18 @@
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 attribute intropolation</p>
<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 max={{max}} value={{curValue}}></paper-progress>
<paper-progress bind-max=max bind-value=curValue></paper-progress>
</div>

<p>
Expand Down
10 changes: 9 additions & 1 deletion lib/core_dom/element_binder.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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));
Expand Down
62 changes: 62 additions & 0 deletions test/core_dom/web_components_spec.dart
Original file line number Diff line number Diff line change
@@ -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');
});
});
}

0 comments on commit c53dc77

Please sign in to comment.