如何在 Angular 应用程序中捕获 Polymer 事件？答案

【问题标题】：How do I catch Polymer events in an Angular app?如何在 Angular 应用程序中捕获 Polymer 事件？
【发布时间】：2014-12-18 08:03:34
【问题描述】：

我将angularjs和polymer一起使用，因为polymer没有足够的material design ui元素，而angularjs有一个material design project (https://material.angularjs.org)来实现material design系统。

HTML (ng-app="list"ng-controller="showTasks")：

<md-content class="md-padding">
    <md-list>
        <md-item ng-repeat="task in tasks">
            <md-item-content>
                <div class="md-tile-left">
                    <paper-icon-button icon="assignment"></paper-icon-button>
                </div>
                <div class="md-tile-content">
                    <h3>{{task.title}}</h3>
                    <h4><strong>Due: </strong>{{task.due}}</h4>
                    <p>
                        <strong>Subjects: </strong>{{task.subjects}}
                    </p>
                </div>
                <paper-ripple class="recenteringTouch" core-transitionend="" fit></paper-ripple>
            </md-item-content>
        </md-item>
    </md-list>
</md-content>

脚本：

<script>
var app = angular.module('list', ['ngMaterial']);
app.controller('showTasks', ['$scope', '$http', function($scope, $http) {
    $scope.tasks = [];
    $http.post('/getAllTasks').success(function(response) {
        if (response.ok == 1) {
            $scope.tasks = response.result;
        }
    });
}]);
</script>

paper-ripple 元素有一个事件core-transitionend。通过设置属性core-transitioned={{event-handler}}并注册处理程序Polymer('element-name', {event-handler: function() {}})，可以在聚合物元素中使用它。

但是这里angularjs会解析{{}}语句，我不能注册paper-ripple因为已经注册了。

那么我怎样才能捕捉到这个事件呢？

【问题讨论】：

标签： javascript angularjs polymer dom-events

【解决方案1】：

如果您想阻止 Angular 解析 {{}} 语句，请尝试使用 {{'{{}}'}}。这可能就是您从聚合物中获得所需的全部内容。

【讨论】：

【解决方案2】：

这里有一些尝试：

<paper-ripple class="recenteringTouch" 
    core-transitionend="{{'{{event-handler}}'}}"
    fit>
</paper-ripple>

【讨论】：

我很困惑...那我该如何写这个函数呢？我尝试在角度控制器内部和外部编写它，但都无法捕获事件。
我对此进行的研究越多，您似乎需要类似以下内容：github.com/GabiAxel/ng-polymer-elements（请参阅最后对其他元素的支持）
我的错误，我没有说清楚。我这里有另一个问题stackoverflow.com/questions/27547156/…，它可以解决我的问题。
但是，您提供的解决方案确实导致 AngularJS 解析错误。

【解决方案3】：

好吧，我想通了。

方法一：

使用directive，并在link函数中：

element.on('click', function() {
    element.on('core-transitionend', function() {
        // method 1 processing
    });
});

方法二：

<paper-ripple class="recenteringTouch" ng-click="rippleClicked($event)" fit></paper-ripple>

$scope.rippleClicked = function($event) {
    angular.element($event.target).on('core-transitionend', function() {
        // method 2 processing
    });
}

但这两种方法不一样。对于方法一，当你点击元素时，按住鼠标，在元素外松开，method 1 processing不会触发（不知道为什么，好像click事件没有触发），而方法2会。

【讨论】：