如何在mousemove上更新可重复使用的AngularJS服务？

Question

我开发了可重复使用的AngularJS服务，该服务允许用户通过单击视图中的按钮从视图中启动，停止和重置倒数计时器。 可重用服务可以通过包含它的任何控制器进行访问。 通过单击此plnkr的链接，可以查看最小示例倒计时应用程序的工作代码。

但我希望每次用户将鼠标移到浏览器窗口中的任何位置时，将计时器重置为其最大默认值。 这意味着在服务中的某处添加$window.addEventListener(...) ，因为该服务必须可在任何控制器之间重用，同时还必须响应鼠标在浏览器窗口上任何位置的任何移动，甚至是不包含在其中的区域链接到控制器的HTML元素。 因此，我不能像其他示例那样简单地在html body标签中添加ng-mousemove="somemethod()" 。 我还希望避免其他文章采用$rootScope.broadcast方法，因为我想尽可能地将代码隔离在服务中。

需要对下面的代码进行哪些特定的更改，以便在用户将鼠标移动到浏览器窗口中的任何位置时将计时器重置为其默认值？

尽管所有代码都在plnkr中以便于编辑，但我也在此处包括了它。

index.html是：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Timer</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>

    <script src="myTimer.js" type="text/javascript"></script>
    <script src="exampleController.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body ng-app="intervalExample">

<div>
  <div ng-controller="ExampleController">
    Test variable: {{ mytimer.testvariable }}<br>

    Time Remaining : <font color='red'>{{mytimer.timeleft}}</font>
    <br>
    <button type="button" data-ng-click="mytimer.startCountdown()">Start Countdown</button>
    <button type="button" data-ng-click="mytimer.stopCountdown()">Stop Countdown</button>
    <button type="button" data-ng-click="mytimer.resetCountdown()">Reset Timer</button>
  </div>
</div>
</body>
</html>

app.js是：

angular.('intervalExample',['ExampleController']);

exampleController.js是：

angular
.module('ExampleController', ['mytimer'])
.controller('ExampleController', ['$scope', 'mytimer', function($scope, mytimer) {

    $scope.mytimer = mytimer;
}]);

myTimer.js是：

angular
.module('mytimer', [])
.service('mytimer', ['$rootScope', '$interval', function($rootScope, $interval) {

    var $this = this;
    this.testvariable = "some value. ";

        this.timeleft = 15;

        var stop;
        this.startCountdown = function() {
          // Don't start a new countdown if we are already counting down
          if ( angular.isDefined(stop) ) return;

          stop = $interval(function() {
            if ($this.timeleft > 0 ) {
              $this.timeleft = $this.timeleft - 1;
            } else {
              $this.stopCountdown();
            }
         }, 1000);
        };

        this.stopCountdown = function() {
          if (angular.isDefined(stop)) {
            $interval.cancel(stop);
            stop = undefined;
          }
        };

        this.resetCountdown = function() {
          this.timeleft = 15;
        };

//        this.$on('$destroy', function() {
            // Make sure that the interval is destroyed too
//            $this.stopCountdown();
//        });

          function subsFunc() {
            $window.addEventListener('mousemove', function(e) {
            $this.timeleft = 15;
        })
  }

}]);

Answer 1

要考虑的问题：

您永远不会调用subsFunc()并且这样做时会看到$window没有注入服务
由于事件会触发每个像素，因此您需要对mousemove回调进行去抖动处理。 将计时器重置为每个像素都没有意义，并且会导致大量不必要的摘要。
对按钮使用指令将无需注入大量控制器
定时器显示相同...可以被指令，并取决于UI和按钮的组合

如何在mousemove上更新可重复使用的AngularJS服务？

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-02-24 02:40:58

如何在mousemove上更新可重复使用的AngularJS服务？

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-02-24 02:40:58

解决方案1
1 已采纳 2016-02-24 02:40:58