如何将鼠标悬停在AngularJs Interval上并暂停时间？

Question

我在UI中有时间使用AngularJS Interval不断更新时间。即使是毫秒也是连续运行的。牢记这一点，当我将鼠标悬停在它上面时，可以暂停时间。非常感谢帮助。以下是代码。

用户界面的图片

HTML

 <div class="container">
 <div class="row ">
 <div class="col-lg-12 text-center" ng-app="myApp" ng-controller="myCtrl">
<h3  ><b id="thetime">{{theTime| date:'hh:mm:ss sss a'}}</b></h3>
</div>
</div>
</div>

AngularJS代码

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date();

  $interval(function () {
      $scope.theTime = new Date();    
  }, 6);

});

Answer 1

在ng-mouseover启动间隔函数

中的ng-mouseleave停止间隔函数中

    $scope.startInterval = function(){
         $scope.flag = $interval(function(){
                        $scope.theTime = new Date();
                    }, 6);
    }

    $scope.stopInterval= function(){
       if($scope.flag)
       $interval.cancel($scope.flag);
    }
    $scope.startInterval();

https://jsfiddle.net/ebinmanuval/7qo4jtjv/