Question

我有一个场景，每个候选人都有一个秒表候选信息位于ng-repeat，我在stop-watch指令控制器中传递doi（面试日期）值，如下所示

angular.module('hrPortalApp')
.directive('stopWatch', function() {
    debugger;
    return {
        restrict: 'A',
        replace: false,
        scope: {
            name: "=",
            time: "=",
            timeOfInterview: "="
        },
        controller: function($scope) {
            debugger;
            $scope.getTimeRemaining = function(endtime) {
                debugger;
                $scope.t[$scope.name].total = Date.parse(endtime) - Date.parse(new Date());
                $scope.t[$scope.name].seconds = Math.floor(($scope.t[$scope.name].total / 1000) % 60);
                $scope.t[$scope.name].minutes = Math.floor(($scope.t[$scope.name].total / 1000 / 60) % 60);
                $scope.t[$scope.name].hours = Math.floor(($scope.t[$scope.name].total / (1000 * 60 * 60)) % 24);
                $scope.t[$scope.name].days = Math.floor($scope.t[$scope.name].total / (1000 * 60 * 60 * 24));
            }

            $scope.initializeClock = function(endtime) {
                debugger;
                $scope.t = {};
                $scope.t[$scope.name] = {};
                $scope.updateClock = function() {
                    debugger;
                    $scope.getTimeRemaining(endtime);
                    $scope.t[$scope.name].hours = ('0' + $scope.t[$scope.name].hours).slice(-2);
                    $scope.t[$scope.name].minutes = ('0' + $scope.t[$scope.name].minutes).slice(-2);
                    $scope.t[$scope.name].seconds = ('0' + $scope.t[$scope.name].seconds).slice(-2);

                    if ($scope.t[$scope.name].total <= 0) {
                        clearInterval($scope.timeinterval);
                    }
                }

                $scope.updateClock();
                $scope.timeinterval = setInterval($scope.updateClock, 1000);
            }


            $scope.initializeClock($scope.timeOfInterview);
        },
        templateUrl: './views/stopWatchView.html'
    };

});

上面$scope.t[$scope.name]

是区分候选人。

模板html如下

<div id="clockdiv">
<div class="tiles">
    <span class="days" ng-bind="t[name].days"></span>
    <span class="hours" ng-bind="t[name].hours"></span>
    <span class="minutes" ng-bind="t[name].minutes"></span>
    <span class="seconds" ng-bind="t[name].seconds"></span>
</div>
<div class="labels">
    <li>Days</li>
    <li>Hours</li>
    <li>Mins</li>
    <li>Secs</li>
</div>

我面临定时器计数器的问题每次都不更新。

任何帮助将不胜感激。

Answer 1

我认为您的问题是因为您使用的是window.setInterval而不是$interval 因此，摘要周期不会运行，因此您的更改不会被注意到。

尝试重写该行

$scope.timeinterval = setInterval($scope.updateClock, 1000);

使用angular的$ interval，即类似这样的

$scope.timeinterval= $interval($scope.updateClock, 1000)

使用ng-bind时更新指令中的数据

1 个答案: