I have an custom event core-transitionend (actually fired by Polymer), and I can set an event handler using document.addEventListener(). But what's the best practice to do it in AngularJS?
Or, I can explicitly set a handler in DOM, i.e. <paper-ripple on-core-transitionend="enter()"></paper-ripple>, but how to define this function 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
directive until seeing your answer!
You could do the following:
auto-binding template.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.
