9

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

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

// 代码基于原始的 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() {

  }]);
4

2 回答 2

27

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

指令是一种教授 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
      });
    };
  })
于 2013-06-30T15:15:55.003 回答
1

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

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

于 2014-03-18T21:54:29.233 回答