각 지시어에 대한 고유 타이머

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> 

VAR 앱 = 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); 
      } 
     } 
    }; 
});