如何在 Ng-Idle 模块中包含鼠标悬停事件答案

【问题标题】：How to include mouse over events in Ng-Idle module如何在 Ng-Idle 模块中包含鼠标悬停事件
【发布时间】：2017-09-07 14:01:43
【问题描述】：

我们正在使用 Angularjs 1.5 和 Ng-Idle 模块来捕获应用程序中特定时间间隔内的用户不活动时间。如果超时达到用户根据空闲开始和空闲结束刷新用户会话，我们会显示警报窗口。当用户真正处于非活动状态时，这种方法很好，这意味着他不会滚动、鼠标单击或输入任何内容，但它不会通过简单地将鼠标移动到应用程序上来检测用户何时在屏幕上处于活动状态。有没有办法在 Ng_Idle 模块中添加额外的事件来捕获鼠标悬停，以通过更多事件来中断不活动？

Please find the code snippet, it is referred from here

http://hackedbychinese.github.io/ng-idle/

                      function closeModals() {
                        if ($scope.warning) {
                          $scope.warning.close();
                          $scope.warning = null;
                          //refreshing the session from server
                        }
                        if ($scope.timedout) {
                          $scope.timedout.close();
                          $scope.timedout = null;
                        }
                      }
                      $scope.$on('IdleStart', function() {
                        closeModals();
                          $scope.warning = $uibModal.open({
                            templateUrl: 'warning-dialog.html'
                          });
                      });

                      $scope.$on('IdleEnd', function() {
                        closeModals();
                      });
                      $scope.$on('IdleTimeout',
                                      function() {
                                        closeModals();
                                          $scope.timedout = $uibModal.open({
                                            templateUrl: 'timedout-dialog.html'
                                          });
                                          $timeout(
                                                function() {
                                                  //logout the application
                                                }, 72000);
                                      });

【问题讨论】：

显示一些代码。到目前为止，您尝试过什么？

标签： javascript angularjs ng-idle

【解决方案1】：

文档似乎没有提供这样的功能。

但是，有多种方法可以做到这一点。其中之一就是简单地将 Ng-Idle 事件与 Angular 的本机指令事件绑定，就像这样

angular.module('myApp')
  .controller('MyCtrl', function($scope) {
    $scope.$on('IdleTimeout', function(){
       renderModal();
    });
    
    $scope.$on('IdleStart', function(){
       createModal();
    });
    
    $scope.$on('IdleEnd', function(){
       closeModal();
    });
    
    $scope.mouseenter = function(){
      $scope.$emit('IdleEnd');
    };
  })

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-mouseenter="mouseenter()">Hover Me to Stop</div>
  </div>
</div>

【讨论】：