Javascript 聚合函数中的数据绑定正在从绑定对象中删除

我遇到了一个绑定包含从angular到Polymer 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>

聚合物({
是：“我的自定义元素”，
特性：{
myprop:对象
},
附：函数（）{
var x=this.myprop.x；//这没问题
this.myprop.myfunc（）；//未定义myfunc！
}
});

以下是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>

angular.module（“myApp”，[]）.controller（“myCtrl”，函数（$scope）{
$scope.myobject={
x:4，
myfunc:function（）{
//功能体
} 
}    
});    

---

为什么自定义元素中没有该函数？

您不能像编写

this.myprop.myfunc（）那样调用角度函数
我无法解释为什么会这样，但如果你想从聚合物中调用角函数，你可以使用
this.fire（'nameEvent'）
并在Angular controller或运行模块中添加事件监听器，如

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

我希望这对你有帮助。祝你好运
你不能像你写的那样调用角度函数
this.myprop.myfunc（）
我无法解释为什么会这样，但如果你想从聚合物中调用角函数，你可以使用
this.fire（'nameEvent'）
并在Angular controller或运行模块中添加事件监听器，如

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

我希望这对你有帮助。祝你好运
我没有用Angular进行模拟，但我认为{{myobject}}可能有问题。只有聚合物才能起作用。
基本上，我在my元素中复制了您的代码，并创建了my元素2，在这里我导入了它。结果是“我的名字”打印在生命周期
附件中

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


聚合物({
是‘我的元素’，
特性：{
myprop:对象，
},
附：函数（）{
var x=this.myprop.x；//这没问题
this.myprop.myfunc（）；//未定义myfunc！
}
});
聚合物({
是‘我的元素二’，
特性：{
myobject：{
类型：对象，
价值：{
x:4，
myfunc:function（）{
console.log（“我的名字”）；
}
}
}
},
});
我不是用角度模拟，但我认为{{myobject}}可能有问题。只有聚合物才能起作用。
基本上，我在my元素中复制了您的代码，并创建了my元素2，在这里我导入了它。结果是“我的名字”打印在生命周期
附件中

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


聚合物({
是‘我的元素’，
特性：{
myprop:对象，
},
附：函数（）{
var x=this.myprop.x；//这没问题
this.myprop.myfunc（）；//未定义myfunc！
}
});
聚合物({
是‘我的元素二’，
特性：{
myobject：{
类型：对象，
价值：{
x:4，
myfunc:function（）{
console.log（“我的名字”）；
}
}
}
},
});
如本文所述：

。。。传递到聚合元素中的对象将通过
JSON.stringify
，然后通过
JSON.parse
（取决于变量类型）

函数将被JSON.stringify完全剥离-只需签出此示例

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

我相信这是源代码中令人不快的一行


。。。附近的评论建议改变这种行为的可能性

用户可以在聚合元素原型上重写此方法，以提供自定义类型的序列化

如本文所述：

。。。传递到聚合元素中的对象将通过
JSON.stringify
，然后通过
JSON.parse
（取决于变量类型）

函数将被JSON.stringify完全剥离-只需签出此示例

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

我相信这是源代码中令人不快的一行


。。。附近的评论建议改变这种行为的可能性

用户可以在聚合元素原型上重写此方法，以提供自定义类型的序列化

如果{myobject}返回一个对象，这应该可以工作。如果{myobject}返回一个对象，这应该可以工作。感谢您的帮助。感谢您的帮助。感谢您的帮助和花时间制作此示例。感谢您的帮助和花时间制作此示例。感谢您的帮助和花时间制作此示例。感谢您的帮助。我把这个作为答案。虽然我有点困惑，为什么来自horacioibrahim的代码样本表明，当angular从等式中取出时，函数会被保留。@StevenSmith我认为horacioibrahim的样本有效，因为它不是通过属性从外部传入的，而是直接绑定到内部属性，可以设置为javascript可以处理的任何内容。感谢您的帮助。我把这个作为答案。虽然我有点困惑，为什么来自horacioibrahim的代码样本表明，当angular从等式中取出时，函数会被保留。@StevenSmith我认为horacioibrahim的样本有效，因为它不是通过属性从外部传入的，而是直接绑定到内部属性，可以设置为javascript可以处理的任何内容。