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

Question

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

0

Я совершенно новый для углового. У меня есть моя директива, и я бы хотел выполнить функцию 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 app = angular.module("cards", ['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>

Higeath 02 авг. 2016, в 12:17

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Amitpal Rawat · Accepted Answer · 2016-08-02T08-11-00.000Z

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

Контроллер:

 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);
            }
        }
    };
});

еще одна вещь, как я могу получить доступ к переменной таймера в timerFunct, чтобы интервал был установлен на правильное значение
позвольте мне отредактировать мой ответ, пока вы ждете.
для работы интервала требуется доступ к интервалу, как я делал в функции контроллера (оценка, интервал)
да, это будет. и поместите его здесь app.directive ("card", function ($ interval) {