数据在高分子结合 - 功能正在从绑定对象除去(Data binding in Polymer - f

我遇到的问题结合包含来自角到聚合物1.0的功能的对象。 功能不被传递到通过在定制元素的目标对象。 下面是一个简化的代码示例：

自定义元素有一个名为myprop单个属性：

<script>    
    Polymer({
        is: 'my-custom-element',
        properties: {
            myprop: Object
        },
        attached: function () {
            var x = this.myprop.x;       //this is ok
            this.myprop.myfunc();        //myfunc is not defined!   

        }
    });

</script>

下面是HTML：

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <my-custom-element myprop="{{myobject}}"></my-custom-element>
    </div>
</div>    

这里是角控制器：

<script>
    angular.module("myApp", []).controller("myCtrl", function ($scope) {    
        $scope.myobject= {
          x: 4,
          myfunc: function() {
             //function body
          } 
        }    
    });    
</script>

为什么不是在自定义元素提供的功能？

Answer 1:

这里记载： https://github.com/Polymer/polymer/blob/3e96425bf0e0ba49b5f1f2fd2b6008e45a206692/PRIMER.md#attribute-deserialization

...传递到聚合物元件对象正在穿过JSON.stringify然后JSON.parse （取决于变量类型）。

职能将由JSON.stringify被完全去掉了 - 刚刚checkout出来这个样本...

console.log( JSON.stringify({x:123,y:function(){ return 123; }}) );
// outputs: {"x":123}

我相信这是来源有问题... ...线

https://github.com/Polymer/polymer/blob/3b0d10b4da804703d493da7bd0b5c22fc6f7b173/src/micro/attributes.html#L232

...和评论推荐附近可能改变这种行为...

用户可能会覆盖上高分子元件原型此方法以提供用于自定义类型的序列化

Answer 2:

就像你写你不能叫角功能this.myprop.myfunc(); 我无法解释为什么会这样，但如果你想从聚合物叫角功能，您可以使用this.fire('nameEvent')及其在角控制器或运行模块添加事件侦听器像

document.addEventListener('nameEvent', function() {
//function body  
})

我希望帮助你。 祝好运

Answer 3:

我不是角模拟，但我认为，{{myObject的}}可以有一个问题。 只有聚合物正常工作。 基本上我抄在我的元素代码，并创建了元二，我导入它。 其结果是“我的名字”印在生命周期的attached 。

<link rel="import" href="../polymer/polymer.html">

<dom-module id="my-element">
<script>    
    Polymer({
        is: 'my-element',
        properties: {
            myprop: Object,
        },
        attached: function () {
            var x = this.myprop.x;       //this is ok
            this.myprop.myfunc();        //myfunc is not defined!   
        }
    });
</script>
</dom-module>

<dom-module id="my-element-two">
<template>
    <my-element myprop="{{myobject}}"></my-element>
</template>

<script>    
    Polymer({
        is: 'my-element-two',
        properties: {
            myobject: {
                type: Object,
                value: {
                    x: 4,
                    myfunc: function() {
                        console.log("My name");
                    }
                }
            }
        },
    });

</script>
</dom-module>

<!-- results is print "My name" in the console. -->
<my-element-two></my-element-two>

文章来源: Data binding in Polymer - function is being removed from bound object