Question

我开发了一个可重复使用的AngularJS服务，允许用户通过单击视图中的按钮从视图中启动，停止和重新设置倒数计时器。可以通过包含它的任何控制器访问可重用服务。可以查看最小示例倒计时应用的工作代码 by clicking the link to this plnkr。

但我希望每次用户在浏览器窗口中的任何位置移动鼠标时，都会将计时器重新设置为其默认值。这意味着在服务中的某处添加$window.addEventListener(...)，因为服务必须可以在任何控制器上重复使用，同时还响应鼠标在浏览器窗口上任何位置的任何移动，甚至是HTML元素中未包含的区域到控制器。因此，我不能简单地在html ng-mousemove="somemethod()"标记the way this other example does中添加body。我也希望避免使用the $rootScope.broadcast approach taken by this other posting，因为我希望尽可能地将代码保留在服务中。

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

虽然all of the code is in the plnkr for easy editing，我也在这里加入。

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未在服务中注入
自事件发生以来，您需要debounce mousemove回调触发每个像素。每个像素重置你的计时器都没有感觉并会导致重大的不必要的摘要。
使用按钮指令将无需注入多个控制器
同样的计时器显示...可以是指令，取决于UI结合按钮

如何在mousemove上重新使用这个可重用的AngularJS服务？

1 个答案: