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

我创建了一个名为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>

：主持人{
显示：块；
}
输入1
输入1
输入1
（功能（）{
聚合物({
是：“我的滑块输入”，
特性：{
价值：{
类型：对象，
计算：“computeOutputs（）”，
reflectToAttribute:true，
通知：正确
},
产出1：{
类型：数字，
reflectToAttribute:true，
通知：正确
},
输出3：{
类型：数字，
reflectToAttribute:true，
通知：正确
},
输出2：{
类型：数字，
reflectToAttribute:true，
通知：正确
}
},
听众：{
'input1.down'：'computeOutputs'，
'input2.down'：'computeOutputs'，
'input3.down'：'computeOutputs'
},
附：函数（）{
//连接此组件时激发。
这个.computeOutputs（）；
},
computeOutputs:函数（）{
var aggregateValue={}；
this.output1=this.complexFunction（1）；
this.output2=this.complexFunction（2）；
this.output3=this.complexFunction（3）；
aggregateValue.output1=此.output1；
aggregateValue.output2=this.output2；
aggregateValue.output3=此.output3；
返回聚合值；
},
complexFunction：函数（输入）{
//一些复杂的计算
返回1；
}
});
})();

我想获得滑块输入的输出，我知道我可以创建/侦听事件通知。如何获取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>

或

我应该这样做吗

<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路vs 1路），如何从自定义元素中获取输出并在控制器中使用它

这里有一个jsbin链接：

提前谢谢！

---

-Dan

我认为最好使用来自的

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

聚合物（“x-双”{
出版：{
输出：{value:0，reflect:true}
},
// ...
});

之后，只需将

bind polymer

添加到HTML代码中的自定义元素中

编辑：由于作者使用的是Polymer 1.0，我找到了另一个将数据从Polymer传递到Angular的教程：。在本教程中，还使用了

angular bind polymer

，因此我认为该插件不是polymer 0.5专用的

---

编辑2：我现在注意到，上面的教程没有使用Polymer1.0，但是Polymer0.9，我只能帮助您解决问题中的Polymer方面的问题，但这里是

您问题中的代码看起来像是正确的Polymer 1.0代码，但JS文件中的代码是Polymer 0.5和1.0之间的混合代码@alesc的答案只适用于0.5，因此存在版本混淆

Fwiw，这是一个JsBin，带有正确的聚合物1.0代码：

如果检查输出，可以看到Polymer正在按要求将值反射回属性。至于Angular为什么不把它们捡起来，我帮不了你

---

Fwiw，由于

notify:true

设置，Polymer也在发送属性更改事件。具体来说，

my slider input

正在发送

object1 changed

，

object2 changed

，

object3 changed

，以及

值changed

（非冒泡）事件。也许您可以使用这些来更新角度范围中的值。

我使用ng polymer elements来完成您所描述的工作，它支持许多现成的聚合物组件，并提供了一种简单的方法来为自定义/其他不支持的组件添加您自己的映射

请点击此处：

根据他们的文件： “有两种情况下，您无法让Web组件与AngularJS模型配合使用：

例如，让Web组件更新您的模型

当用户更改输入文本时，不会更改myModel

例如，绑定字符串以外的任何内容

将不起作用，因为表达式{{myMap}}将被视为字符串。 加入了天然高分子元素。”

---

我相信你给出的答案是聚合物0.5，但有证据表明OP使用的是聚合物1.0。谢谢你的提示。是的，我使用的是聚合物1.0，谢谢你指出这一点@ScottMiles@alesc我在自定义元素中添加了bind polymer指令，但它仍然没有绑定。我确保reflectToAttribute和notify设置为true。我错过什么了吗？我按照指示做的，你能看一下吗？是因为我用的是聚合物1.0吗@ScottMiles我认为

角结合聚合物

也适用于聚合物1.0。我发现了一个关于Polymer 1.0的新教程，它也使用了它（而且它可以工作）。更新：angular bind Polymer指令确实可以工作，尽管它主要用于字符串和非复杂对象。感谢updaing JSBin，我的意思是使用Polymer 1而不是0.5，因此JSBin和发布的问题之间存在差异。我注意到在