Question

我正在尝试检测空闲用户（例如没有鼠标或触摸事件）并显示弹出警告。我有一个检测超时的服务，另一个用于显示弹出窗口。从app.run调用超时服务。我差不多完成了它，有以下两个问题，

弹出窗口显示在同一页面中，而不是模态。
多次显示弹出窗口。

这是我的代码。 / *** App **** /

var myapp = angular.module("myapp", ['ui.bootstrap']);
myapp.run(function ($rootScope, timeoutService) {    
timeoutService.setup();
});

/ ****超时服务**** /

  myapp.factory('timeoutService', function ($window, modalService) {
  var timeoutID;
  var startTimer = function () {
    // wait 2 seconds before calling goInactive
    timeoutID = $window.setTimeout(goInactive, 2000);
}
 var resetTimer =function(e) {
    $window.clearTimeout(timeoutID);
    goActive();
 }
 var goInactive = function () {
     modalService.showModal({}, modalOptions).then(function (result) {
         alert("Hello");
     });

 }
 var goActive=function() {
     startTimer();
 }
 var modalOptions = {
     closeButtonText: 'Cancel',
     actionButtonText: 'Delete Customer',
     headerText: 'Delete ?',
     bodyText: 'Are you sure you want to delete this customer?'
 };
var timeOutService = {};
timeOutService.setup = function () {
    $window.addEventListener("mousemove", resetTimer, false);
    $window.addEventListener("mousedown", resetTimer, false);
    $window.addEventListener("keypress", resetTimer, false);
    $window.addEventListener("DOMMouseScroll", resetTimer, false);
    $window.addEventListener("mousewheel", resetTimer, false);
    $window.addEventListener("touchmove", resetTimer, false);
    $window.addEventListener("MSPointerMove", resetTimer, false);
    startTimer();
};    
return timeOutService;
});

/ ******模态服务****** /

 myapp.service('modalService', ['$modal', function ($modal) {

var modalDefaults = {
    backdrop: true,
    keyboard: true,
    modalFade: true,
    templateUrl:'../Modal.html'
};
var modalOptions = {
    closeButtonText: 'Close',
    actionButtonText: 'OK,',
    headerText: 'Proceed?',
    bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
    if (!customModalDefaults) customModalDefaults = {};
    customModalDefaults.backdrop = 'static';
    return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
    //Create temp objects to work with since we're in a singleton service
    var tempModalDefaults = {};
    var tempModalOptions = {};

    //Map angular-ui modal custom defaults to modal defaults defined in service
    angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

    //Map modal.html $scope custom properties to defaults defined in service
    angular.extend(tempModalOptions, modalOptions, customModalOptions);

    if (!tempModalDefaults.controller) {
        tempModalDefaults.controller = function ($scope, $modalInstance) {
            $scope.modalOptions = tempModalOptions;
            $scope.modalOptions.ok = function (result) {
                $modalInstance.close(result);
            };
            $scope.modalOptions.close = function (result) {
                $modalInstance.dismiss('cancel');
            };
        }
    }

    return $modal.open(tempModalDefaults).result;
};

}]);

Answer 1

您必须创建一个功能已定义的全局控制器，该驱动程序可以在主页上使用，也可以从文档的任何页面发送调用。应该参考分配控制器html＆lt; div ng - controller =“SesionCtrl”＆gt; ＆LT; / div＆gt;

app.controller('SesionCtrl',function($scope,Idle,Keepalive,$log){
 $Scope.$On('IdleStart',function(){
 //Open Modal code
 });
 $ Scope . $ On ( ' IdleTimeout ', function () {
  // The end of the timeout Logout
  window.location = " logout.php " ;
 });
} ) ;

<html lang="en"ng-app="myApp">
<body ng-app="myApp">

<div ng-controller="SesionCtrl"></div><!--Instance Controller-->
</body>
</html>

角度检测空闲用户

1 个答案: