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>

我想得到my-slider-input的输出，我知道我可以创建/监听事件通知。如何获得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链接：http://jsbin.com/kosetiyelu/edit?html,output

提前致谢！ -Dan

Answer 1

我认为最好使用here中的angular-bind-polymer指令。代码已经编写完成，因此无需您自己实现。

上述页面的说明：

这仅在Polymer元素发布和反映时才有效   属性。也就是说，声明属性是不够的：

要将out属性标记为可反映，请使用。声明它   发布财产：

因此，您的元素应如下所示：

<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 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还发送了属性更改事件。具体来说，my-slider-input正在发送object1-changed，object2-changed，object3-changed和value-changed（非冒泡）事件。也许您可以使用它们来更新Angular范围中的值。

Answer 3

我正在使用ng-polymer-elements来做你所描述的，它支持许多聚合物组件，并提供了一种简单的方法来为自定义/其他不支持的组件添加自己的映射。

点击此处：https://gabiaxel.github.io/ng-polymer-elements/

从他们的文件：＆＃34;在两种情况下，您无法使用Web Components来处理AngularJS模型：

让Web Components更新您的模型 <paper-input value="{{myModel}}"></paper-input> 当用户更改输入文本时，不会更改myModel。
绑定除字符串之外的任何内容，例如 <google-map map="{{myMap}}"><google-map> 将无效，因为表达式{{myMap}}将被视为字符串。进入聚合物元素。＆＃34;

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

3 个答案: