Grigorius / angular-bind-polymer

Angular directive for bidirectional variable binding of Polymer attributes.

angular-bind-polymer

Angular directive for double variable binding of Polymer attributes.

Installation

Usage

Source the directive per normal:

    <script src="bower_components/angular-bind-polymer/angular_bind_polymer.js"></script>

Add gr.polymerBind as dependency for your Angular application:

var PizzaStoreApp = angular.module('pizzaStoreApp', [
  'gr.polymerBind'
]);

Apply the bind-polymer-input directive to your custom input elements:

<core-input placeholder="Placeholder text here" bind-polymer-input="testing"></core-input>
<pre>{{testing}}</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.