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

Question

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

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

- Melkor

---

创建一个指令，将事件绑定到元素。 - Naeem Shaikh

@NaeemShaikh 我看过很多帖子和指令教程，但我仍然不确定如何实现它。这里的指令是做什么用的？如何传递事件参数？ - Melkor

Answer 1

请查看this fiddle，在这里我创建了一个自定义指令，将事件绑定到元素上。

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

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

        })
            }    


        }
    })

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

- Naeem Shaikh

---

非常感谢！在看到你的回答之前，我对“指令”一词并不理解！ - Melkor

@Melkor 如果事件较少，这种方法可以工作，但如果您想绑定20或30个事件处理程序，您会为每个事件处理程序创建一个自定义指令吗？ - Walid Ammar

Answer 2

你可以按照以下步骤操作：

1. 将你的自定义元素包裹在一个auto-binding模板中。
2. 将所有来自Angular范围的处理程序绑定到Polymer范围（模板元素）。

就是这样！

<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的插值符号以使它们能够一起工作。

- Walid Ammar

---

谢谢你们的帮助，但问题是我必须更改插值标记，这比Naeem的答案更复杂。 - Melkor