Question

我遇到绑定包含从angular 1.0到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>

这是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将完全删除函数 - 只需签出此示例...

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

...附近的评论提示可能会改变这种行为......

用户可以在Polymer元素原型上覆盖此方法，以提供自定义类型的序列化

Answer 2

你不能像写this.myprop.myfunc();一样调用Angular函数我无法解释为什么会这样，但如果你想从Polymer调用Angular函数你可以使用this.fire('nameEvent')并在Angular控制器或运行模块中添加事件监听器，如

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

我希望能帮助你。祝你好运

Answer 3

我没有使用Angular进行模拟，但我认为{{myobject}}可能有问题。只有聚合物才能正常工作。基本上我在my-element中复制了你的代码，并在我导入它的地方创建了my-element-two。结果是在生命周期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>

Polymer中的数据绑定 - 函数正从绑定对象中删除

3 个答案: