Question

我想在时间计数器为零时启用按钮。在这里，我有两个时间计数器'第一场比赛一次开始，另一场比赛在另一场比赛开始'。当第一个计数器为零时应启用第一个按钮，就像第二个按钮一样。任何人都可以帮助我

我的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的新人，请帮助我。如果存在相同的解决方案，请给我链接。谢谢大家

Answer 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"> </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" > </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

基于时间计数器，如何使用angularjs启用和禁用按钮

1 个答案: