AngularJs dynamic Event Handling for the whole page level

Question

I want to create following event(s) using angularjs.

mousemove
keydown
DOMMouseScroll
mousewheel
mousedown
touchstart
touchmove
scroll

Now what I am trying is as following...,

<!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>

But I cannot get it working. Let me get your suggestions.

check out this plunkr this should give you an idea http://plnkr.co/edit/5U8mr8gBTQJajLzb3wSj?p=preview — stackg91, Sep 17 '15 at 07:45

score 1 · Answer 1 · answered Sep 17 '15 at 07:42

1

Since each $scope inherits from the $rootScope and you are not using an isolated scope here, you can use $rootScope.$on to subscribe to the events for your whole application.

A great introduction can be found here.

answered Sep 17 '15 at 07:42

Martin Seeler

6,874
3
33
45

score 0 · Answer 2 · edited May 23 '17 at 12:03

After,I learned from this answer, I got it working in following code.

<!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>

Demo Link

AngularJs dynamic Event Handling for the whole page level

2 Answers2