AngularJS：如何监听 DOM 事件？答案

【问题标题】：AngularJS: How to listen to DOM Events?AngularJS：如何监听 DOM 事件？
【发布时间】：2015-07-06 01:13:14
【问题描述】：

我是 AngularJS 的新手，所以请原谅我这个转储问题。
如何收听 'dom' 事件，例如 'click' 或 'mousemove'？

这就是我得到的（没有错误，但控制台中也没有结果）

// 代码基于原始的angularjs-seed。

angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope', function($scope) {

        $scope.$on('dragover', function() {
            console.log('dragover');
        });

        $scope.$on('click', function() {
            console.log('click');
        });

  }])

  .controller('MyCtrl2', [function() {

  }]);

【问题讨论】：

标签： angularjs

【解决方案1】：

在 AngularJS 中，事件通常由 directives 处理。

指令是一种教授 HTML 新技巧的方法。在 DOM 编译期间指令与 HTML 匹配并执行。这允许用于注册行为或转换 DOM 的指令。

对于“点击”事件，您可以使用ngClick 指令：

HTML:

<button ng-click="doSomething()">Click me</button>

JS：

function MyCtrl($scope){
  $scope.doSomething = function(){
    // do something...
  };
}

对于“dragover”事件（以及 Angular 原生指令尚未涵盖的其他事件），您可以编写自己的指令：

HTML:

<div drop-target>Drop here</div>

JS：

angular.module('MyApp')
  .directive('dropTarget', function(){
    return function($scope, $element){
      $element.bind('dragover', function(){
        // do something when dragover event is observed
      });
    };
  })

【讨论】：

我认为$element.on 更适合最新版本（$element.bind 仍受支持），如stackoverflow.com/questions/21913650/… 中所述。

【解决方案2】：

ngClick 和 ngMouseover 支持开箱即用，但您需要为拖动事件编写自己的指令，或者更好的是，使用已经编写好的第三方模块。我设法让这个拖放模块适用于我的代码：

https://www.npmjs.org/package/angular-draganddrop

【讨论】：