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

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

您可以使用指令和 Controller 之间的双向绑定(bind)来实现此目的。

在 Controller 中取一个名为 disabled1 和 disabled2 的作用域变量，并进行从指令到 Controller 的双向绑定(bind)。

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>

在 View 中，我通过属性指令发送禁用值并在指令中使用它。

如果指令中的值发生变化，它会反射(reflect)回 View 。

使用该技术，我对相应的按钮使用了 ng-disabled = "disabled1" 和 ng-disabled = "disabled2"。

a reference for 2-way binding