javascript - 将 AngularJS 函数作为事件回调传递给 Polymer 1.0 组件

Question

我正在构建一个 POC，以证明使用各种框架在不同类型的环境中使用 Polymer (v1.0) Web 组件的能力。在第一个环境(一个小型​​ Angular 应用程序)中，我将 Angular Controller 函数传递给 Web 组件来处理表单提交。

下面的代码...

当提交事件被触发时，处理函数会被很好地调用，但当组件准备好/加载时，也会调用该函数。没有布埃诺。

这就是使用 Polymer 实现类似目标的方式吗？我只希望处理程序在事件发生时触发。

本质上，我希望能够根据调用组件的位置以不同的方式处理提交，因此我的假设是我会/可以传递处理程序函数。这是我第一次尝试使用 Polymer，并希望确保我以正确的方式实现这一点。

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

在查看了所有 Polymer 文档并对 Web 组件有了更好的整体了解之后，我认为我在这里尝试做的并不是正确的方法。组件应该是完全独立的，因此没有理由像我在这里尝试那样传递函数。