如何在 AngularJS 中绑定自定义事件？

Question

我有一个自定义事件core-transitionend （实际上是由 Polymer 触发的），我可以使用document.addEventListener()设置一个事件处理程序。 但是在 AngularJS 中这样做的最佳实践是什么？

或者，我可以在 DOM 中显式设置一个处理程序，即<paper-ripple on-core-transitionend="enter()"></paper-ripple> ，但是如何在 AngularJS 中定义这个函数？

Answer 1

看到这个小提琴，在这里我创建了一个自定义指令，它将事件绑定到元素，

angular.module('HelloApp', [])
    .directive('customDir', function () {
        return {
            restrict: 'A',

            link: function(scope, element, attrs)      
            {
                element.bind("click",function()
            {
            alert("you clicked me");

        })
            }    


        }
    })

在您的情况下，您可以简单地将定义的事件绑定到元素

Answer 2

您可以执行以下操作：

1. 将您的自定义元素包装在auto-binding模板中。
2. 将所有处理程序从角度范围绑定到聚合物范围（模板元素）。

就是这样！

 <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 的插值符号才能让它们协同工作。