Javascript 将作用域从html绑定到指令，同时执行ng repeat并执行不会反映回html的操作

我有一个要求，我需要显示每个人的计时器倒计时。 我编写了一个指令，从html中获取doi（采访日期），在指令控制器中执行一些倒计时操作，并每秒更新计时器。 以下是html代码：

<div class="panel panel-default" ng-repeat="candidateInfo in aCandidateDetails">
<div class="panel-heading">
    <div class="row">
        <div class="col-xs-1">
            <a style="cursor:pointer">
      {{candidateInfo.name}}</a>
        </div>
    </div>
    <div stop-watch time="candidateInfo.doi"></div>
</div>

<div id="clockdiv">
<div class="tiles">
    <span class="days"></span>
    <span class="hours"></span>
    <span class="minutes"></span>
    <span class="seconds"></span>
</div>
<div class="labels">
    <li>Days</li>
    <li>Hours</li>
    <li>Mins</li>
    <li>Secs</li>
</div>

{{candidateInfo.name}

指令代码：

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

                $scope.initializeClock = function(endtime) {
                    debugger;
                    $scope.clock = document.getElementById('clockdiv');
                    $scope.daysSpan = $scope.clock.querySelector('.days');
                    $scope.hoursSpan = $scope.clock.querySelector('.hours');
                    $scope.minutesSpan = $scope.clock.querySelector('.minutes');
                    $scope.secondsSpan = $scope.clock.querySelector('.seconds');

                    $scope.updateClock = function() {
                        debugger;
                        $scope.t = $scope.getTimeRemaining(endtime);

                        $scope.daysSpan.innerHTML = $scope.t.days;
                        $scope.hoursSpan.innerHTML = ('0' + $scope.t.hours).slice(-2);
                        $scope.minutesSpan.innerHTML = ('0' + $scope.t.minutes).slice(-2);
                        $scope.secondsSpan.innerHTML = ('0' + $scope.t.seconds).slice(-2);

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

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


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

});

angular.module（'hrPortalApp'））
.directive（'stopWatch'，function（）{
调试器；
返回{
限制：“A”，
替换：false，
范围：{
时间：“=”
},
控制器：功能（$scope）{
调试器；
$scope.getTimeRemaining=函数（endtime）{
调试器；
$scope.t=Date.parse（endtime）-Date.parse（new Date（））；
$scope.seconds=数学地板（$scope.t/1000）%60）；
$scope.minutes=数学地板（$scope.t/1000/60）%60）；
$scope.hours=数学楼层（$scope.t/（1000*60*60））%24）；
$scope.days=数学下限（$scope.t/（1000*60*60*24））；
返回{
“总计”：$scope.t，
“天”：$scope.days，
“小时数”：$scope.hours，
“分钟”：$scope.minutes，
“秒”：$scope.seconds
};
}
$scope.initializelock=函数（结束时间）{
调试器；
$scope.clock=document.getElementById（'clockdiv'）；
$scope.daysSpan=$scope.clock.querySelector（'.days'）；
$scope.hoursSpan=$scope.clock.querySelector（'.hours'）；
$scope.minutesSpan=$scope.clock.querySelector（'.minutes'）；
$scope.secondsSpan=$scope.clock.querySelector（'.seconds'）；
$scope.updatelock=function（）{
调试器；
$scope.t=$scope.getTimeRemaining（endtime）；
$scope.daysSpan.innerHTML=$scope.t.days；
$scope.hoursSpan.innerHTML=（'0'+$scope.t.hours）.slice（-2）；
$scope.minutesSpan.innerHTML=（'0'+$scope.t.minutes）.slice（-2）；
$scope.secondsSpan.innerHTML=（'0'+$scope.t.seconds）.slice（-2）；
如果（$scope.t.total这可能是由以下行引起的：

$scope.clock = document.getElementById('clockdiv');

一个ID在一个页面上只能出现一次。在ngRepeat的每个过程中，当您需要一个“clockdiv”元素时，首先请求“the”
clockdiv
元素

也就是说，更具角度的方法是不手动更新
span
s的
innerHTML
，而是绑定到范围参数，如下所示：

<div class="tiles">
    <span class="days" ng-bind="t.days"><!-- this will bind to $scope.t.days --></span>
    <span class="hours" ng-bind="t.hours"><!-- this will bind to $scope.t.hours --></span>
    <span class="minutes" ng-bind="t.minutes"><!-- this will bind to $scope.t.minutes --></span>
    <span class="seconds" ng-bind="t.seconds"><!-- this will bind to $scope.t.seconds --></span>
</div>

将足以更新您的页面。
这可能是由以下行引起的：

$scope.clock = document.getElementById('clockdiv');

一个ID在一个页面上只能出现一次。在ngRepeat的每个过程中，当您需要一个“clockdiv”元素时，首先请求“the”
clockdiv
元素

也就是说，更具角度的方法是不手动更新
span
s的
innerHTML
，而是绑定到范围参数，如下所示：

<div class="tiles">
    <span class="days" ng-bind="t.days"><!-- this will bind to $scope.t.days --></span>
    <span class="hours" ng-bind="t.hours"><!-- this will bind to $scope.t.hours --></span>
    <span class="minutes" ng-bind="t.minutes"><!-- this will bind to $scope.t.minutes --></span>
    <span class="seconds" ng-bind="t.seconds"><!-- this will bind to $scope.t.seconds --></span>
</div>

将足以更新您的页面。
只是猜测。..u使用相同的类/id替换innerhtml天/小时/分钟/秒为什么不使用ng模型。只是怀疑它可能会替换html.ng-model中的第一个类/id做什么？@NehaYou在innterhtml中设置$scope.t.days/hour..etc值。而不是将其保留在$t.object中并使用相同的var和at html{t.days}只是一个猜测..u使用相同的类/id替换innerhtml天/小时/分钟/秒为什么不使用ng模型。只是怀疑它可能会替换html.ng-model中找到的第一个类/id做什么？@NehaYou在innterhtml中设置$scope.t.days/hour..etc值。而是将其保留在$t.object中，并使用相同的var和at-html{{t.days}