如何將自定義聚合物元素的屬性綁定到angularjs

Question

我創建了一個名爲my-slider-input的自定義元素，該元素計算用戶輸入的值。我需要在角度控制器中使用這些值。我想知道做這件事的最佳做法是什麼？

鑑於這種聚合物元件：

<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 this component is 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> 

我想我的滑蓋輸入的輸出，我知道我可以創建/監聽事件通知。我怎樣才能得到一個angularjs控制器的輸出？

我該如何做這樣的事情？

<div ng-Controller="myController"> 
    <my-slider-input value="{{outputAggregateValue}}"></my-slider-value> 
</div> 

或

我應該做這樣的事情？

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

目前在任何一種情況下，$ scope值都不會更新。

如果這不是最好的方法（雙向vs單向），我如何從我的自定義元素中獲取輸出並在控制器中使用它？

這裏有一個jsbin鏈接：http://jsbin.com/kosetiyelu/edit?html,output

提前感謝！ -Dan

Answer 1

我認爲最好使用here的指令angular-bind-polymer。代碼已經寫好了，它正在工作，所以你不需要自己去實現它。從上述頁面

說明：

這如果聚合物元素髮布，反映 屬性纔有效。也就是說，它是不夠的聲明屬性：

爲了紀念出屬性可反射，與 聲明爲這樣的發佈屬性：

你的元素，因此應該是這樣的：

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

之後，只需將bind-polymer添加到HTML代碼中的自定義元素即可。

編輯：由於作者使用聚合物1.0，我發現另一個教程將數據從Polymer傳遞到Angular：http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/。在本教程中，還使用了angular-bind-polymer，所以我不認爲插件是Polymer 0.5特定的。

編輯2：我現在已經注意到，上面的教程中不使用聚合物1.0，但聚合物0.9。

Answer 2

我只能幫助你解決你的問題的聚合物方面，但是在這裏。

在你的問題中的代碼看起來正確的聚合物1.0的代碼，但在JS斌代碼聚合物0.5到1.0之間的混淆。 @ alesc的答案只有0.5，所以有版本混淆。

FWIW，這裏是適當聚合物1.0代碼JsBin：http://jsbin.com/vevawi/edit?html,output

如果您檢查您可以看到高分子反映了其值回屬性所要求的輸出。至於爲什麼Angular沒有選擇它，我無法幫助你。

FWIW，因爲notify: true設置，聚合物也被髮送屬性更改事件。具體而言，my-slider-input正在發送object1-changed，object2-changed，object3-changed，和value-changed（非鼓泡）的事件。也許你可以使用它們來更新Angular作用域中的值。

Answer 3

我使用NG-聚合物元素做你的描述，它支持開箱即用的許多聚合物組分並提供一個簡單的方法來添加自己的映射自定義/其他不支持的組件。

入住這裏：https://gabiaxel.github.io/ng-polymer-elements/

從他們的文檔： 「有兩種情況下，你不能讓Web組件與您AngularJS模式工作：

1. 有Web組件更新模型，例如 <paper-input value="{{myModel}}"></paper-input> 當用戶更改輸入文本時不會更改myModel
2. 綁定除字符串以外的任何內容，例如 <google-map map="{{myMap}}"><google-map> 將不起作用，因爲表達式{{myMap}}將被視爲一個字符串。 進入NG-聚合物元素。」