在执行ng-repeat和执行在HTML中没有反映的操作时，将作用域从HTML绑定到指令

binding scope from html to the directive while doing ng-repeat and performing action which doesnt reflect back in html

本文关键字：执行 HTML 作用域 绑定 指令 ng-repeat 操作      更新时间：2023-09-26

我有一个要求，我需要显示每一个人的计时器倒计时。我写了一个指令，从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>

指令代码:

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'
        };
});

完整HTML代码:

<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>

的问题，我在这里面临的是每次它更新第一个重复行。它不显示其他行的任何内容。

这可能是由于:

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

一个ID在一个页面上只出现一次。在ngRepeat的每次传递中，当您想要"a"clockdiv元素时，首先请求"the"clockdiv元素。

也就是说，一个更有角度的方法是不手动更新span的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.t = $scope.getTimeRemaining(endtime);
相关文章：