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

Question

我在将包含 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>

这是HTML：

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

这里是 angular 控制器：

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

为什么该功能在自定义元素中不可用？

Answer 1

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

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

希望对你有所帮助。祝你好运

Answer 2

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

Answer 3

如此处记录：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

...附近的评论建议改变此行为的可能性...

Users may override this method on Polymer element prototypes to provide serialization for custom types

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

Data binding in Polymer - function is being removed from bound object

javascript

angularjs

polymer

polymer-1.0