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

Question

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

下面的代码...

当提交事件被触发时，处理函数被调用得很好，但当组件 ready/loads 时，该函数也会被调用。没有布埃诺。

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

本质上，我希望能够根据调用组件的位置以不同方式处理提交，因此我的假设是 would/could 传入处理程序函数。这是我第一次尝试使用 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 组件有了更好的整体理解之后，我认为我在这里尝试做的并不是正确的方法。组件应该是完全独立的，因此没有理由像我在这里尝试做的那样传递函数。

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

Passing AngularJS functions to Polymer 1.0 components as event callbacks

javascript

web-component

polymer-1.0