Ho un evento personalizzato core-transitionend (effettivamente attivato da Polymer) e posso impostare un gestore eventi utilizzando document.addEventListener(). Ma qual è la migliore pratica per farlo in AngularJS?Come associare eventi personalizzati in AngularJS?
Oppure, posso impostare in modo esplicito un gestore in DOM, ad esempio <paper-ripple on-core-transitionend="enter()"></paper-ripple>, ma come definire questa funzione in AngularJS?
vedere this violino, qui ho creato una direttiva personalizzato che lega l'evento per l'elemento,
angular.module('HelloApp', [])
.directive('customDir', function() {
return {
restrict: 'A',
link: function(scope, element, attrs)
{
element.bind("click",function()
{
alert("you clicked me");
})
}
}
})
Nel tuo caso si può semplicemente vincolare il proprio evento definito all'elemento
Grazie mille! Non ho capito 'direttiva' fino a vedere la tua risposta! – Melkor
@Melkor Per meno eventi questo funzionerà, ma cosa farai se hai 20 o 30 gestori di eventi che vuoi associare, creerai una direttiva personalizzata per ognuno di essi? –
Allora la soluzione di Mohammad andrà bene, credo. – Melkor
Si potrebbe fare il seguente:
auto-binding.E questo è tutto!
<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>Oppure, se non è un problema per copiare l'intero campo di applicazione è possibile:
<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() {
\t return {
restrict: 'A',
link: function(scope, element, attrs) {
for(k in scope) {
\t if (!element[0][k]) {
\t \t element[0][k] = scope[k];
\t }
}
}
}
})
.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>Avviso: che ho dovuto cambiare angolare di interpolation symbol per ottenerli lavorare insieme.
Grazie ugualmente, ma il fatto è che devo modificare il markup di interpolazione, che è meno semplice della risposta di Naeem. – Melkor
creare una direttiva che associa l'evento all'elemento –
@NaeemShaikh Ho visto molti post e tutorial direttivi, ma non sono ancora sicuro di come implementarlo. Cosa fanno le direttive qui? Come passare gli argomenti dell'evento? – Melkor