How to bind custom events in AngularJS?

Question

I have a custom core-transitionend event (actually fired by Polymer) and I can set an event handler using document.addEventListener() . But what is the best thing to do in AngularJS?

Or I can explicitly set the handler in the DOM, i.e. <paper-ripple on-core-transitionend="enter()"></paper-ripple> , but how to define this function in AngularJS?

Answer 1

see this script, here I created a custom directive that binds an event to an element,

 angular.module('HelloApp', []) .directive('customDir', function () { return { restrict: 'A', link: function(scope, element, attrs) { element.bind("click",function() { alert("you clicked me"); }) } } }) 

In your case, you can just bind your specific event to an element

Answer 2

You can do the following:

• Wrap your custom element inside an auto-binding template.
• Bind all handlers from the angular region to the polymer volume (template element).

What is it!

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link href="https://www.polymer-project.org/components/polymer/polymer.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import"> <div ng-app="demo-app"> <div ng-controller="DemoController"> <template bind-events="clickMe,mouseOver" is="auto-binding"> <paper-button raised on-tap="{{clickMe}}" on-mouseover="{{mouseOver}}">click me</paper-button> </template> <pre> <code> {[{text}]} </code> </pre> </div> </div> <script> angular.module('demo-app', []) .config(function($interpolateProvider) { $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); }) .directive('bindEvents', function() { return { restrict: 'A', link: function(scope, element, attrs) { eventNames = attrs.bindEvents.split(','); eventNames.forEach(function(eventName) { element[0][eventName] = scope[eventName]; }); } } }) .controller('DemoController', function($scope) { $scope.text = ''; $scope.clickMe = function() { $scope.text += '\nyou clicked me!!'; $scope.$apply(); }; $scope.mouseOver = function() { $scope.text += '\nyou hovered me!!'; $scope.$apply(); } }); </script> 

Or, if you do not need to copy the entire scope, you can:

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <link href="https://www.polymer-project.org/components/polymer/polymer.html" rel="import"> <link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import"> <div ng-app="demo-app"> <div ng-controller="DemoController"> <template bind-angular-scope is="auto-binding"> <paper-button raised on-tap="{{clickMe}}" on-mouseover="{{mouseOver}}">click me</paper-button> </template> <pre> <code> {[{text}]} </code> </pre> </div> </div> <script> angular.module('demo-app', []) .config(function($interpolateProvider) { $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); }) .directive('bindAngularScope', function() { return { restrict: 'A', link: function(scope, element, attrs) { for(k in scope) { if (!element[0][k]) { element[0][k] = scope[k]; } } } } }) .controller('DemoController', function($scope) { $scope.text = ''; $scope.clickMe = function() { $scope.text += '\nyou clicked me!!'; $scope.$apply(); }; $scope.mouseOver = function() { $scope.text += '\nyou hovered me!!'; $scope.$apply(); } }); </script> 

Please note: I had to change the angular interpolation character to make them work together.