Ich habe ein benutzerdefiniertes Ereignis core-transitionend (tatsächlich von Polymer ausgelöst), und ich kann einen Ereignishandler mit document.addEventListener() setzen. Aber was ist die beste Vorgehensweise in AngularJS?Wie binden Sie benutzerdefinierte Ereignisse in AngularJS?
Oder kann ich explizit einen Handler in DOM, d. H. <paper-ripple on-core-transitionend="enter()"></paper-ripple>, aber wie definiert man diese Funktion in AngularJS?
siehe this Geige, hier habe ich eine benutzerdefinierte Richtlinie erstellt, die das Ereignis an das Element bindet,
angular.module('HelloApp', [])
.directive('customDir', function() {
return {
restrict: 'A',
link: function(scope, element, attrs)
{
element.bind("click",function()
{
alert("you clicked me");
})
}
}
})
In Ihrem Fall Sie einfach Ihr definiertes Ereignis an das Element binden kann
Vielen Dank soooo! Ich habe "Richtlinie" nicht verstanden, bis ich deine Antwort gesehen habe! – Melkor
@Melkor Für weniger Ereignisse wird dies funktionieren, aber was werden Sie tun, wenn Sie 20 oder 30 Ereignishandler haben, die Sie binden wollen, erstellen Sie eine benutzerdefinierte Direktive für jeden von ihnen? –
Dann wird Mohammeds Lösung gut sein, denke ich. – Melkor
Sie könnten tun die folgenden:
auto-binding Vorlage.Und das war's!
<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>Oder wenn es kein Problem, den ganzen Umfang kopieren Sie folgende Möglichkeiten:
<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>Hinweis: dass ich Angular des ändern musste interpolation symbol, um sie zu bekommen zusammenarbeiten.
Vielen Dank, aber die Sache ist, ich muss die Interpolation Markup ändern, die weniger einfach ist als Naeem's Antwort. – Melkor
Erstellen Sie eine Direktive, die das Ereignis an Element bindet –
@NaeemShaikh Ich habe viele Beiträge und Direktiven Tutorials gesehen, aber ich bin mir immer noch nicht sicher, wie man es implementiert. Was machen Richtlinien hier? Wie übergebe ich Ereignisargumente? – Melkor