Уникальный таймер для каждой директивы

Question

Я совершенно новый для углового. У меня есть моя директива, и я бы хотел выполнить функцию timer() для каждого объекта.

Мой контроллер с данными:

app.controller("cardsCtrl", function($scope, $interval){ 

     $scope.changeTire = { 
      name: 'Change Tire', 
      timer: 16 
      }; 
      $scope.fixTire = { 
      name: 'Fix Tire', 
      timer: 30 
      }; 

     function timer(){ 
      $interval(function(){ 
       if($scope.countDown>0){ 
        $scope.countDown--; 
        $scope.cardAnimation = {'width': +($scope.countDown/fullTimer*100)+'%' } 
       } 
      },1000,0); 
     } 

}); 

Моя директива:

<div class="card"> 
     <span class="name">{{cardInfo.name}}</span> 
     <span class="time">{{cardInfo.timer }}</span> 
     <div class="card-inner" ng-style="cardAnimation" ng-hide="finishCard"></div> 
    </div> 

вар приложение = angular.module ("карты", [ 'ngAnimate']);

app.directive("card", function(){ 
    return{ 
     restrict: 'E', 
     scope: { 
      cardInfo: '=info' 
     }, 
     templateUrl: 'card.html' 
    }; 
}); 

И HTML

<div ng-app="cards" ng-controller="cardsCtrl"> 
    <card info="changeTire" ></card> 
    <card info="fixTire" ></card> 
</div> 

Answer 1

один из способов сделать это, передать функцию обратного вызова директивы и выполнять эту функцию в директиве.

Контроллер:

app.controller("cardsCtrl", function($scope, $interval){ 

    $scope.changeTire = { 
     name: 'Change Tire', 
     timer: 16, 
     timerFunction: timerFunct 
     }; 
     $scope.fixTire = { 
     name: 'Fix Tire', 
     timer: 30, 
     timerFunction: timerFunct 
     }; 

    function timerFunct(){ 
     $interval(function(){ 
      if($scope.countDown>0){ 
       $scope.countDown--; 
       $scope.cardAnimation = {'width': +($scope.countDown/fullTimer*100)+'%' } 
      } 
     },1000,0); 
    } 

}); 

и в директиве:

app.directive("card", function(){ 
    return{ 
     restrict: 'E', 
     scope: { 
      cardInfo: '=info' 
     }, 
     templateUrl: 'card.html', 
     link: function(scope){ 
      scope.cardInfo.timerFunction() 
     } 
    }; 
}); 

вместо кода выше этого.

Контроллер:

app.controller("cardsCtrl", function ($scope, $interval) { 

    $scope.changeTire = { 
     name: 'Change Tire', 
     timer: 16 
    }; 

    $scope.fixTire = { 
     name: 'Fix Tire', 
     timer: 30 
    }; 
}); 

и в директиве:

app.directive("card", function() { 
    return { 
     restrict: 'E', 
     scope: { 
      cardInfo: '=info' 
     }, 
     templateUrl: 'card.html', 
     link: function (scope) { 
      timerFunct(scope.cardInfo.timer); 

      function timerFunct(timer) { 
       $interval(function() { 
        if (timer > 0) { 
         timer--; 
         $scope.cardAnimation = { 'width': +(timer/fullTimer * 100) + '%' } 
        } 
       }, 1000, 0); 
      } 
     } 
    }; 
});