Passing AngularJS functions to Polymer 1.0 components as event callbacks

Question

I'm building a POC to prove out the ability to use a Polymer (v1.0) web component in varying types of environments, using various frameworks. In the first environment, a small Angular app, I'm passing an Angular controller function to the web component to handle a form submission.

Code below...

The handler function is called just fine when the submit event is fired but the function is also being called when the component is ready/loads. No bueno.

Is this how one would go about achieving something like this with Polymer? I only want the handler to fire when the event takes place.

Essentially I want to be able to handle the submit differently depending on where I invoke the component so my assumption is that I would/could pass in the handler function. This is my first stab at using Polymer and want to ensure that I'm approaching this the right way.

// My Angular Controller
angular.module('controllers')
    .controller('MainCtrl', function ($scope) {
        $scope.handleIt = function () {
            // do submit stuff...
        };
    });


// My Polymer Component (the pertinent parts anyway..)
<dom-module id="my-input">    
    <template>
        <form>
            <input type="text"/>
            <input type="submit" value="submit" on-submit="{{ handler }}"/>
        </form>
    </template>
    <script>
        Polymer({
            is: 'my-input',
            properties: {
                handler: {
                    type: Object
                }
            }
        });
    </script>
</dom-module>


// Finally, my Polymer component invocation in the Angular partial...
<my-input handler="{{ handleIt() }}"/>

Answer 1

After reviewing all of the Polymer docs and gaining a better overall understanding of web components, I think what I'm attempting to do here is not the correct approach. Components should be totally self contained therefore there is no reason to pass a function in like I'm attempting to do here.