如何将自定义聚合物元素的属性绑定到 angularjs

Question

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

鉴于此聚合物元素：

<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 的输出，我知道我可以 create/listen 获取事件通知。如何获得 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 值都没有更新。

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

这是一个 jsbin link：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，所以我认为插件不是 Polymer 0.5 特定的。

编辑 2：我现在注意到上面的教程没有使用 Polymer 1.0，但是 Polymer 0.9 .

Answer 2

我只能帮助您解决问题的 Polymer 方面，但这里是。

您问题中的代码看起来像是正确的 Polymer 1.0 代码，但 JS Bin 中的代码在 Polymer 0.5 和 1.0 之间混淆。 @alesc的回答只针对0.5，所以版本混乱。

Fwiw，这是一个带有正确 Polymer 1.0 代码的 JsBin：http://jsbin.com/vevawi/edit?html,output

如果您检查输出，您会发现 Polymer 正在按要求将值反映回属性。至于为什么Angular不接，我帮不了你

Fwiw，由于 notify: true 设置，Polymer 还会发送属性-change 事件。具体来说，my-slider-input 正在发送 object1-changed、object2-changed、object3-changed 和 value-changed（非冒泡）事件。也许您可以使用它们来更新 Angular 范围内的值。

Answer 3

我正在使用 ng-polymer-elements 来执行您描述的操作，它支持许多开箱即用的聚合物组件，并提供了一种简单的方法来为 custom/other 不受支持的组件添加您自己的映射。

在这里查看：https://gabiaxel.github.io/ng-polymer-elements/

来自他们的文档： “在两种情况下，您无法让 Web 组件与您的 AngularJS 模型一起工作：

例如，让 Web 组件更新您的模型 <paper-input value="{{myModel}}"></paper-input> 当用户更改输入文本时不会更改 myModel。
绑定除字符串以外的任何内容，例如 <google-map map="{{myMap}}"><google-map> 将不起作用，因为表达式 {{myMap}} 将被视为字符串。输入 ng-polymer-elements。

如何将自定义聚合物元素的属性绑定到 angularjs

How to Bind Attribute from Custom Polymer Element to angularjs

javascript

angularjs

polymer