NodeBindDirective Example

NodeBindDirective lets you use Node.bind() in an Angular app. This means that you can bind to custom elements, including Polymer elements. The bindings are declared by expressions in attribute values surrounded by double-square-brackets, like so: <input value="[[ name ]]">. This declares that the expression name should be bound to the value property of the element using Node.bind(). The advantage of using Node.bind are:

Node.bind() takes care of setting up the binding, including two-way bindings, and we don't need directives per-attribute.
Custom Elements that expose properties will be properly bound, again including two-way bindings. You can use the growing collection of custom element libraries in your app.

First, let's use a <polymer-ui-accordion> from the polymer-ui-elements to host our demos. The accordion doesn't have any interesting bindings, but it's nice to show that we can use complex custom element containers in an Angular template.

Specific demos are in the accordion panes.

Built-in Elements

Here we bind the built-in <input> element to the expression name multiple ways, using both Angular's ng-model directive and the NodeBindDirective.

name: {{ name }}

ng-model="name":

value="[[ name ]]":

value="Hi [[ name ]]":

Note: There is a bug in Angular 0.9.2 where no-model steals focus if the value has been changed though the model. This has been fixed in the repository.

Custom Element Two-Way Binding

Here we two-way bind to a custom element property. In this case the element is polymer-ui-ratings and we're binding to the value property which is of type int.

value: {{ value }}

ng-model="value":

Note: There is a bug in Polymer where it is not type converting bindings correctly, so setting the value from the <input> is not working.