How to bind custom events in AngularJS?
see this fiddle, here I have created a custom directive which binds the event to the 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 simply bind your defined event to the element
You could do the following:
- Wrap your custom element inside an
auto-bindingtemplate. - Bind all handlers from angular scope to polymer scope (template element).
And that's 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 it's not an issue to copy the whole 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>Notice: that I had to change Angular's interpolation symbol to get them to work together.