Angular directive for double variable binding of Polymer attributes.
N.B. This will not work with raw paper/core elements because they do not publish their attributes. See note below on Polymer Usage for details.
Use bower to install:
$ bower install angular-bind-polymer
Script order is important. The web components platform (polyfills) need to be loaded first, followed by the Angular library and then this library (angular-bind-polymer):
<script src="bower_components/platform/platform.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="angular_bind_polymer.js"></script>The Angular module needs to be inititialized before the Polymer elements are imported otherwise Polymer will overwrite the attributes before angular-bind-polymer has a chance to process them.
Add eee-c.angularBindPolymer as dependency for your Angular application:
var PizzaStoreApp = angular.module('pizzaStoreApp', [
'eee-c.angularBindPolymer'
]);The final piece of setup is to import the Polymer elements:
<link rel="import" href="test/x-double.html">To bind values from Polymer elements, apply the bind-polymer directive:
<x-pizza bind-polymer state="{{pizzaState}}"></x-pizza>
<pre ng-bind="pizzaState"></pre>Changes from the <x-pizza> custom element will now update the pizzaState variable in local scope.
Note: changes in Angular's scope are already bound. That is, changes to pizzaState will update the <x-pizza> custom element without this or any other modules. This directive is soley used to watch for changes in custom elements for the purposes of updating a bound variable in Angular's scope.
This will only work if the Polymer element publishes and reflects attributes. That is, it is insufficient to declare attributes:
<!-- THIS WON'T WORK!!! -->
<polymer-element name="x-double" attributes="in out">
<template><!-- ... --></template>
<script>
// ...
</script>
</polymer-element>To mark the out attribute as reflectable, declare it as such with the publish property:
<polymer-element name="x-double" attributes="in out">
<template><!-- ... --></template>
<script>
Polymer("x-double", {
publish: {
out: {value: 0, reflect: true}
},
// ...
});
</script>
</polymer-element>Unfortunately, core and paper elements tend not to reflect attributes at this time. This means that this directive will not work with them. Hopefully this will change in the near future.