Question

我想使用angularjs创建以下事件。

鼠标移动
KEYDOWN
DOMMouseScroll
滚轮
鼠标按下
touchstart
touchmove
滚动

现在我正在尝试的是......，

<!DOCTYPE html>
<html ng-app="appname">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>

<body>    
</body>

<script>
var app = angular.module('appname', []);
app.directive('myDirective', function() {
  alert("Hello");
  return {
    link: function(scope, element) {

      scope.appname.$on('mousemove', function() {
        alert("mousemove");
      });

      scope.appname.$on('keydown', function() {
        alert("keydown");
      });

      scope.appname.$on('DOMMouseScroll', function() {
        alert("DOMMouseScroll");
      });    

    });
  }
});
</script>

</html>

但我无法让它发挥作用。让我来听你的建议。

Answer 1

由于每个$scope都继承自$rootScope，并且您未在此处使用隔离范围，因此您可以使用$rootScope.$on订阅整个应用程序的事件。

一个很棒的介绍可以be found here。

Answer 2

之后，我从这个answer中学到了，我在下面的代码中得到了它。

<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>

<body>
</body>

<script>

var app = angular.module('testApp', []);
app.run(['$document', function($document) {
    var bodyElement = angular.element($document);
    bodyElement.bind('click', function (e) {
        console.log('click');
    });
    bodyElement.bind('mousemove', function (e) {
        console.log('mousemove');
    }); 
    bodyElement.bind('keydown', function (e) {
        console.log('keydown');
    }); 
    bodyElement.bind('DOMMouseScroll', function (e) {
        console.log('DOMMouseScroll');
    }); 
    bodyElement.bind('mousewheel', function (e) {
        console.log('mousewheel');
    }); 
    bodyElement.bind('mousedown', function (e) {
        console.log('mousedown');
    }); 
    bodyElement.bind('touchstart', function (e) {
        console.log('touchstart');
    }); 
    bodyElement.bind('touchmove', function (e) {
        console.log('touchmove');
    }); 
    bodyElement.bind('scroll', function (e) {
        console.log('scroll');
    }); 
}]);

</script>

</html>

演示Link

AngularJs整个页面级别的动态事件处理

2 个答案: