javascript - How to Bind Attribute from Custom Polymer Element to angularjs -

i created custom element called my-slider-input computes values user input. need take use these values in angular controller. i'm wondering what's best practice this?

given polymer element:

<dom-module id="my-slider-input">     <style>       :host {         display: block;       }     </style>   <template>         <button id="input1">input 1</button>     <button id="input2">input 1</button>     <button id="input3">input 1</button>   </template> </dom-module> <script>   (function() {     polymer({       is: 'my-slider-input',       properties: {          value: {           type: object,           computed: 'computeoutputs()',           reflecttoattribute: true,           notify: true         },         output1: {           type: number,           reflecttoattribute: true,           notify: true         },         output3: {           type: number,           reflecttoattribute: true,           notify: true         },         output2: {           type: number,           reflecttoattribute: true,           notify: true         }       },       listeners: {         'input1.down': 'computeoutputs',         'input2.down': 'computeoutputs',         'input3.down': 'computeoutputs'       },       attached: function() {           //fired when component attached.           this.computeoutputs();       },       computeoutputs: function() {         var aggregatevalue = {};          this.output1 = this.complexfunction(1);         this.output2 = this.complexfunction(2);         this.output3 = this.complexfunction(3);          aggregatevalue.output1 = this.output1;         aggregatevalue.output2 = this.output2;         aggregatevalue.output3 = this.output3;          return aggregatevalue;       },       complexfunction: function(input) {          //some complex calculations         return 1;          }     });     })();   </script> 

i want outputs of my-slider-input, know can create/listen event notifications. how can output angularjs controller?

how do this?

<div ng-controller="mycontroller">     <my-slider-input value="{{outputaggregatevalue}}"></my-slider-value> </div> 

or

should this?

<div ng-controller="mycontroller">     <my-slider-input output1="{{output1}}" output2="{{output2}}" output1="{{output3}}"></my-slider-value> </div> 

currently in either scenario, $scope values not updated.

if isn't best way (2-way vs 1-way), how output out of custom element , work in controller?

here's jsbin link: http://jsbin.com/kosetiyelu/edit?html,output

thanks in advance! -dan

i believe best use angular-bind-polymer directive here. code written , working, no need implement yourself.

instructions aforementioned page:

this work if polymer element publishes , reflects attributes. is, insufficient declare attributes:

to mark out attribute reflectable, declare such publish property:

your element should therefore this:

<polymer-element name="x-double" attributes="in out">   <template><!-- ... --></template>   <script>     polymer("x-double", {       publish: {         out: {value: 0, reflect: true}       },       // ...     });   </script> </polymer-element> 

after that, add bind-polymer custom elements within html code.

edit: since author using polymer 1.0, have found tutorial passing data polymer angular: http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/. in tutorial, angular-bind-polymer used don't think plugin polymer 0.5 specific.

edit 2: have noticed above tutorial not use polymer 1.0, polymer 0.9.