How do I catch Polymer events in an Angular app?

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?

score 0 · Answer 1 · answered Dec 18 '14 at 08:26

0

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.

answered Dec 18 '14 at 08:26

Jeff Ling

1,032
9
12

score 0 · Answer 2 · answered Dec 18 '14 at 08:37

0

Here's something to try:

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

answered Dec 18 '14 at 08:37

Meligy

35,654
11
85
109

I'm confused... Then how do I write this function? I tried to write it both inside and outside the angular controller, but neither can capture the event. – Melkor Dec 18 '14 at 08:58
The more I look into this, it seems like you need something like: https://github.com/GabiAxel/ng-polymer-elements (see support for additional elements at the end) – Meligy Dec 19 '14 at 00:57
My mistake, I didn't make it clear. I had another question here http://stackoverflow.com/questions/27547156/how-to-bind-custom-events-in-angularjs/27553447#27553447 , and it could solve my problem. – Melkor Dec 19 '14 at 04:16
But still, the solution you offered did cause AngularJS parse error. – Melkor Dec 19 '14 at 04:18

score 0 · Accepted Answer · answered Jan 07 '15 at 11:46

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.

How do I catch Polymer events in an Angular app?

3 Answers3

Method 1:

Method 2: