Как использовать функцию независимо в каждой строке строки таблицы в AngularJs

Question

Я создал функцию таймера, которая принимает будущую дату в виде строки и принимает разницу с текущей датой для ЧЧ: ММ: СС и запускает таймер уменьшения.Когда таймеры становятся 00:00:00, строка таблицы должна мигать.

Я создал функцию, таймер и строка также начали мигать.Но таймер показывает одинаковое значение для всех строк, и все строки начали мигать.Я хочу, чтобы это было независимо для каждой строки, т.е. каждая строка должна иметь свой независимый таймер, отображающий не одно и то же значение в каждой.

Ниже приведена функция внутри контроллера -

$scope.timeInitializer = function (timeFromApi) {
  $scope.blinkAlarmOn = false;
  $scope.currentTimeUTCMiliSec = new Date(new Date().toUTCString()).getTime();
  $scope.targetDeployDate = timeFromApi.split('.')[0]+"Z";
  $scope.deployTimeUTCMiliSec = new Date(new Date(Date.parse($scope.targetDeployDate)).toUTCString()).getTime();
  $scope.differenceDateUTC = new Date($scope.deployTimeUTCMiliSec - $scope.currentTimeUTCMiliSec).toUTCString();

  $scope.totalSecondLeft = Math.floor(($scope.deployTimeUTCMiliSec - $scope.currentTimeUTCMiliSec)/1000);
  $scope.c = $scope.totalSecondLeft;

  $scope.hrs = new Date($scope.differenceDateUTC).getUTCHours();
  $scope.mins=new Date($scope.differenceDateUTC).getUTCMinutes();
  $scope.secs=new Date($scope.differenceDateUTC).getUTCSeconds();

  $scope.temp = $interval(function () {

    if ($scope.c != 0 && $scope.secs > 0) {
      $scope.c--;
      $scope.secs--;
      if ($scope.secs == 0 && $scope.mins > 0) {
        $scope.mins--;
        $scope.secs=59;
        if ($scope.mins==0 && $scope.hrs > 0) {
          $scope.hrs--;
          $scope.mins = 59;
        }
      }
    }
    if( ($scope.hrs == 0) && ($scope.mins == 0) && ($scope.secs == 0)) {
      $interval.cancel($scope.temp);
      $scope.blinkAlarmOn=true;
    }
  },1000);
};

Вызов функции внутри пользовательского интерфейса

<td>
  <div ng-show="tckt.state=='DELAY_DEPLOYMENT'" 
       ng-if="tckt.state=='DELAY_DEPLOYMENT'" ng- 
       init="timeInitializer(tckt.deploymentDatetime)">{{hrs+":"+mins+":"+secs}} 
  </div>
</td>

Answer 1

Для независимой сферы действия или функционирования мы можем использовать пользовательскую директиву AngularJs.

mainApp.directive('countdown', function() {
return {
    restrict: 'E',
    template: '<div>{{countdownVal}}</div>',
    scope: {
        initVal: '='
    },
    controller: function($scope, $interval) {

                           if($scope.initVal){
                           $scope.blinkAlarmOn=false;
                           $scope.currentTimeUTCMiliSec=new Date(new Date().toUTCString()).getTime();
                           $scope.targetDeployDate=$scope.initVal.split('.')[0]+"Z";
                           $scope.deployTimeUTCMiliSec=new Date(new Date(Date.parse($scope.targetDeployDate)).toUTCString()).getTime();
                           if($scope.deployTimeUTCMiliSec > $scope.currentTimeUTCMiliSec){
                               $scope.differenceDateUTC=new Date($scope.deployTimeUTCMiliSec-$scope.currentTimeUTCMiliSec).toUTCString();
                               $scope.totalSecondLeft=Math.floor(($scope.deployTimeUTCMiliSec-$scope.currentTimeUTCMiliSec)/1000);
                               $scope.c=$scope.totalSecondLeft;

                               $scope.hrs=new Date($scope.differenceDateUTC).getUTCHours();
                               $scope.mins=new Date($scope.differenceDateUTC).getUTCMinutes();
                               $scope.secs=new Date($scope.differenceDateUTC).getUTCSeconds();


                               $scope.temp=$interval(function () {

                                   if($scope.c!=0 && $scope.secs>0){
                                       $scope.c--;
                                       $scope.secs--;
                                       if($scope.secs==0 && $scope.mins>0){
                                           $scope.mins--;
                                           $scope.secs=59;
                                           if($scope.mins==0 && $scope.hrs>0){
                                               $scope.hrs--;
                                               $scope.mins = 59;
                                           }
                                       }
                                   }
                                   if(($scope.hrs==0)&&($scope.mins==0)&&($scope.secs==0)){
                                       $interval.cancel($scope.temp);
                                       $scope.blinkAlarmOn=true;
                                   }
                                   $scope.countdownVal = $scope.hrs+":"+$scope.mins+":"+$scope.secs;
                               },1000);
                               if(($scope.hrs==0)&&($scope.mins==0)&&($scope.secs==0)){
                                   $scope.countdownVal ="Timeout";
                               }else{
                                   $scope.countdownVal = $scope.hrs+":"+$scope.mins+":"+$scope.secs;
                               }

                           }else{
                               $scope.countdownVal ="Timeout";
                           }
    }else{
        $scope.countdownVal ="No delay time Available.";
    }
    }
}
});

<countdown init-val=tckt.fuelendDateTime></countdown>