如何在 AngularJS 中绑定自定义事件
How to bind custom events in AngularJS?
我有一个自定义事件core-transitionend
(实际上是由 Polymer 触发的(,我可以使用 document.addEventListener()
设置事件处理程序。但是在AngularJS中这样做的最佳实践是什么?
或者,我可以在 DOM 中显式设置一个处理程序,即 <paper-ripple on-core-transitionend="enter()"></paper-ripple>
,但是如何在 AngularJS 中定义这个函数?
看到这个小提琴,在这里我创建了一个自定义指令,它将事件绑定到元素,
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 的插值符号才能让它们协同工作。
相关文章:
- 自定义控件中的双向绑定在SAPUI5中不起作用
- jquery数据表的自定义ko绑定
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- ListView的ItemTemplate内的自定义HtmlControl的数据绑定失败
- css绑定中的自定义类名
- 在 aurelia 中使用 repeat.for 绑定自定义元素的正确方法是什么
- 挖空绑定自定义组件,使其不与中心视图模型冲突
- 如何强制挖空以重新绑定自定义绑定
- 挖空视图模型绑定未定义错误
- 如何在 AngularJS 中绑定自定义事件
- Ko_selectize数组对象绑定未定义
- 无法绑定自定义元素
- 视图绑定未定义
- 在jQuery中绑定自定义事件时触发代码
- 如何在KendoUI上动态绑定列定义
- 材质角度复选框绑定自定义输入复选框
- 如何使用jQuery绑定自定义事件的函数
- 使用敲除绑定自定义事件
- 指令绑定未定义
- 从元素中解绑定自定义函数