javascript - 如何将自定义 polymer 元素的属性绑定(bind)到 angularjs

Question

我创建了一个名为 my-slider-input 的自定义元素，它根据用户输入计算值。我需要在 Angular Controller 中使用这些值。我想知道执行此操作的最佳做​​法是什么？

给定这个 polymer 元素:

<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>

我想获得 my-slider-input 的输出，我知道我可以创建/监听事件通知。如何获得 angularjs Controller 的输出？

我该如何做这样的事情？

<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 值都不会更新。

如果这不是最佳方式(2 向与 1 向)，我如何从我的自定义元素中获取输出并在我的 Controller 中使用它？

这是一个 jsbin 链接:http://jsbin.com/kosetiyelu/edit?html,output

提前致谢!-丹

Answer 1

我认为最好使用 here 中的 angular-bind-polymer 指令.代码已经写好了，可以运行了，所以不需要你自己实现。

来自上述页面的说明:

This will only work if the Polymer element publishes and reflects attributes. That is, it is insufficient to declare attributes:

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>

之后，只需将 bind-polymer 添加到 HTML 代码中的自定义元素即可。

编辑:由于作者使用的是 Polymer 1.0，我找到了另一个将数据从 Polymer 传递到 Angular 的教程:http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/ .在本教程中，还使用了 angular-bind-polymer，所以我认为 plugin 不是 Polymer 0.5 特定的。

编辑 2:我现在注意到上面的教程没有使用 Polymer 1.0，而是使用 Polymer 0.9。