AngularJS: Comment écouter les événements DOM?

je suis nouveau sur AngularJS, de sorte s'il vous plaît pardonnez-moi ce vidage de la question.
Comment puis-je écouter 'dom' événements comme 'cliquez sur' ou 'mousemove'?

C'est ce que j'ai eu (Pas d'erreurs, mais pas de résultat dans la console)

//Le Code est basé sur l'original, angularjs-graine.

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() {

  }]);

source d'informationauteur fabian

  1. 27

    Dans AngularJS, les événements sont généralement gérés par le directives.

    Directives sont un moyen d'enseigner HTML de nouveaux trucs. Au cours DOM compilation
    les directives sont en correspondance avec le HTML et exécuté. Cela permet
    directives pour enregistrer le comportement, ou de transformer les DOM.

    Pour l'événement "click", vous utilisez ngClick directive:

    HTML: 

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

    JS: 

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

    Pour le "dragover" de l'événement (et d'autres événements qui ne sont pas déjà couverts Angulaire natif directives) vous devez écrire votre propre directive:

    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
      });
    };
  })
  2. 1

    ngClick et ngMouseover sont pris en charge hors de la boîte, mais vous aurez besoin d'écrire votre propre directive pour les événements de glisser, ou mieux encore, utiliser un tiers de module qui a déjà été écrit. J'ai réussi à obtenir ce faites glisser et déposez le module de travail pour mon code:

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