2016-11-16 2 views
0

Я хочу включить кнопку, когда счетчик времени равен нулю. Здесь у меня есть два счетчика времени: «Первая игра начинается за один раз, а другая игра начинается в другое время». Когда первая кнопка должна быть включена, когда первый счетчик времени равен нулю, как и второй. Может кто-нибудь помочь мнеНа основе счетчика времени, как я могу включить или отключить кнопку с помощью angularjs

Мой HTML код приведен ниже

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="timer2.js"></script> 

    <div class='wrap' ng-app='app' ng-controller="myCtrl"> 
     <div class='time-to'> 
     First Game Starts in... <span countdown='10' date={{date1}} >&nbsp;</span><button ng-click="clickMe()" ng-show="showMe" >Play Now</button><br> 
     Second Game Starts in... <span countdown='10' date={{date2}}>&nbsp;</span><button ng-click="clickMe()" ng-show="showMe" >Play Now</button> 
     </div> 
    </div> 

Angularjs код timer2.js Приведенный ниже код

var app = angular.module('app', []); 
app.controller('myCtrl', function($scope) { 
    $scope.date1='16 November 2016 17:35:00'; 
    $scope.date2='17 November 2016 18:10:00'; 

}); 
    app.directive('countdown', [ 
     'Util', 
     '$interval', 
     function (Util, $interval) { 
      return { 
       restrict: 'AE', 
       scope: { date: '@' }, 
       link: function (scope, element) { 
        var future; 

        future = new Date(scope.date); 

        element.showMe1 = true; 
        $interval(function() { 
         var diff; 
         diff = Math.floor((future.getTime() - new Date().getTime())/1000); 
         console.log(diff); 
         return element.text(Util.dhms(diff)); 
        }, 1000); 
       } 
      }; 
     } 
    ]).factory('Util', [function() { 
      return { 
       dhms: function (t) { 
        var days, hours, minutes, seconds; 
        days = Math.floor(t/86400); 
        t -= days * 86400; 
        hours = Math.floor(t/3600) % 24; 
        t -= hours * 3600; 
        minutes = Math.floor(t/60) % 60; 
        t -= minutes * 60; 
        seconds = t % 60; 
        return [ 
         days + 'd', 
         hours + 'h', 
         minutes + 'm', 
         seconds + 's' 
        ].join(' : '); 
       } 
      }; 
     }]); 

Я новичок в angularjs любезно, пожалуйста, помогите мне. Если такое же решение существует, пожалуйста, дайте мне ссылку. Спасибо за все

+0

как вам, что ваш счетчик становится равным нулю? – Sravan

+0

Я хочу включить кнопку, когда текущее время равно указанному времени. Здесь я могу получить значение разницы от «var diff» – Rijo

+0

вы начинаете счетчик где-нибудь здесь? – Sravan

ответ

1

Вы можете использовать two-way binding с directive и controller для этого.

Возьмите переменные области видимости в контроллере с именем disabled1 и disabled2 и сделайте двустороннюю привязку от директивы к контроллеру te.

var app = angular.module('app', []); 
app.controller('myCtrl', function($scope) { 
    $scope.disabled1 = true; 
    $scope.disabled2 = true; 
    $scope.date1='16 November 2016 17:35:00'; 
    $scope.date2='17 November 2016 18:10:00'; 

}); 

Директива:

app.directive('countdown', [ 
     'Util', 
     '$interval', 
     function (Util, $interval) { 
      return { 
       restrict: 'AE', 
       scope: { 
        date: '@', 
        disabled: '=' 
       }, 
       link: function (scope, element) { 
        var future; 

        future = new Date(scope.date); 

        element.showMe1 = true; 
        $interval(function() { 
         var diff; 
         diff = Math.floor((future.getTime() - new Date().getTime())/1000); 
         console.log(diff); 
         if(diff == 0) 
         { 
          scope.disabled = false; 
         } 
         return element.text(Util.dhms(diff)); 
        }, 1000); 
       } 
      }; 
     } 
    ]) 

Проверьте область,

scope: { 
     date: '@', 
     disabled: '=' 
     } 

Вид:

<div class='wrap' ng-app='app' ng-controller="myCtrl"> 
    <div class='time-to'> 
    First Game Starts in... <span countdown='10' date={{date1}} disabled="disabled1">&nbsp;</span><button ng-click="clickMe()" ng-show="showMe" ng-disabled="disabled1">Play Now</button><br> 
    Second Game Starts in... <span countdown='10' date={{date2}} disabled="disabled2" >&nbsp;</span><button ng-click="clickMe()" ng-show="showMe" ng-disabled="disabled2">Play Now</button> 
    </div> 
</div> 

В представлении я отправляю значение отключенным значением через директиву атрибута и используя его в директиве.

Если это значение изменяется в директиве, оно возвращается к виду.

Используя эту технику, я использовал ng-disabled = "disabled1" и ng-disabled = "disabled2" для соответствующих кнопок.

a reference for 2-way binding

+0

@ Риджо, проверил мой ответ? – Sravan

+0

нет упоминаний, хорошего дня. :) – Sravan

+0

Можно ли присвоить значение даты текстовому полю? – Rijo