Data Binding In Polymer - Function Is Being Removed From Bound Object

I'm encountering an issue binding an object that contains a function from angular to Polymer 1.0. The function is not being passed through into the target object in the custom elem

Solution 1:

As documented here: https://github.com/Polymer/polymer/blob/3e96425bf0e0ba49b5f1f2fd2b6008e45a206692/PRIMER.md#attribute-deserialization

... objects passed into polymer elements are being passed through JSON.stringify and then JSON.parse (depending on variable type).

Functions will be completely stripped out by JSON.stringify - just checkout out this sample...

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

I believe this is the offending line in source...

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

... and comments nearby suggest possibility to change this behavior...

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

Solution 2:

You can't call Angular function like you write this.myprop.myfunc(); I can't explain why this is so, but if you want call Angular function from Polymer you can use this.fire('nameEvent') and in Angular controller or run module add event listener like

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

I hope that help you. Good luck

Solution 3:

I'm not simulating with Angular but I think that {{myobject}} can have a problem. Only with Polymer works fine. Basically I copied your code in the my-element and created my-element-two where I import the it. The result is "My name" printed in the lifecycle attached.

<linkrel="import"href="../polymer/polymer.html"><dom-moduleid="my-element"><script>Polymer({
        is: 'my-element',
        properties: {
            myprop: Object,
        },
        attached: function () {
            var x = this.myprop.x;       //this is okthis.myprop.myfunc();        //myfunc is not defined!   
        }
    });
</script></dom-module><dom-moduleid="my-element-two"><template><my-elementmyprop="{{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>