我有一个自定义事件core-transitionend
(实际上由Polymer触发),我可以使用document.addEventListener()
设置事件处理程序。但在AngularJS中,最佳实践是什么?
或者,我可以在DOM中显式设置处理程序,即<paper-ripple on-core-transitionend="enter()"></paper-ripple>
,但在AngularJS中如何定义此函数?
我有一个自定义事件core-transitionend
(实际上由Polymer触发),我可以使用document.addEventListener()
设置事件处理程序。但在AngularJS中,最佳实践是什么?
或者,我可以在DOM中显式设置处理程序,即<paper-ripple on-core-transitionend="enter()"></paper-ripple>
,但在AngularJS中如何定义此函数?
请查看this fiddle,在这里我创建了一个自定义指令,将事件绑定到元素上。
angular.module('HelloApp', [])
.directive('customDir', function () {
return {
restrict: 'A',
link: function(scope, element, attrs)
{
element.bind("click",function()
{
alert("you clicked me");
})
}
}
})
auto-binding
模板中。<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>
如果复制整个作用域不是问题,您也可以这样做:
<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>
注意:我不得不更改Angular的插值符号以使它们能够一起工作。