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

Question

I use angularjs and polymer together, because polymer doesn't have enough material design ui elements, and angularjs has a material design project ( https://material.angularjs.org ) in order to implement the material design system.

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:

<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 element has an event core-transitionend . It can be used in polymer-element by setting the attribute core-transitioned={{event-handler}} and register the handler Polymer('element-name', {event-handler: function() {}}) .

But here angularjs will parse {{}} statement, and I can't register paper-ripple because it has been registered.

So how can I catch this event?

Answer 1

If you want to stop angular from parsing the {{}} statement, try using {{'{{}}'}} . That might be all you need to get what you need from polymer.

Answer 2

Here's something to try:

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

Answer 3

Well, I figured it out.

Method 1:

use directive , and in the link function:

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

Method 2:

<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
    });
}

But the two methods are not the same. For method 1, when you click on the element, hold the mouse, and release it outside the element, the method 1 processing will not trigger (I don't know why, it seems like the click event is not triggered), while method 2 will.