使用角度定时器停止单个定时器

Question

我有一个使用角定时器的应用程序，尽管是，但是我很难停止一个单一的计时器。当我点击超时的第一个，定时器它停止他们所有。

基本上，我根据雇员的姓名制作个人计时器如下：

index.html

...
<md-card class="md-padding">
  <md-content-card>
  <md-input-container>
    <label>Employee</label>
    <md-select ng-model="employeeName">
      <md-option ng-repeat="employee in employees" value="{{employee.name}}">
        {{employee.name}}
      </md-option>
    </md-select>
  </md-input-container>
  <center>
  <md-button class="md-raised md-primary md-hue-2" ng-click="startTimer()">Time In</md-button>
  </center>
  </md-content-card>
</md-card>

<md-card ng-repeat="(key, value) in times">
  <md-content-card>
  <center>
    <h2>{{ value.employeeName }}</h2>
    <h3>Time In At: {{ value.date | date: 'medium' }}</h3>
    <h3>
      <timer interval="1000">{{hours}} hour{{hoursS}}, {{minutes}} minute{{minutesS}}, {{seconds}} second{{secondsS}}.</timer>
    </h3>
  <br>
  <md-button class="md-raised md-accent md-hue-2" ng-click="stopTimer()">Time Out</md-button>
  </center>
  </md-content-card>
</md-card>
...

app.js

angular
  .module("HomeApp")
  .controller("HomeCtrl", function ($scope){
    $scope.employees = [
      {name: "Jerald"},
      {name: "Arnie"},
      {name: "Junnie"},
      {name: "Gilbert"}
    ];

    $scope.times = [];

    $scope.startTimer = function (){
        $scope.times.push({
          employeeName: $scope.employeeName,
      date: new Date()   
        });
    };

    $scope.stopTimer = function (){
        $scope.$broadcast('timer-stop');
    };

    $scope.$on('timer-stopped', function (event, data){
        console.log('Timer Stopped - data = ', data);
    });

  });

​

​

Answer 1

角定时器是基于事件引发的控制器作用域。如果在单个作用域上定义了多个定时器，那么就开始并一起停止。

您在这里很幸运，因为您在这里使用的是ng-repeat，它创建了一个新的作用域，定时器就嵌套在它里面。

您只需要访问这个作用域就可以引发停止特定计时器的事件。当按钮的事件处理程序被调用时，this指向ng-repeat的作用域，因此这是可行的

  $scope.stopTimer = function (){
        this.$broadcast('timer-stop');
    };