2

我有一个指令，它基本上只是一个倒数计时器。用法相当简单，为真时开始倒计时startFlag，为假时停止计数，时间用完时调用超时函数：

app.directive('countdownTimer', [ '$interval', 
    function($interval) {
        var directive = {
            restrict: 'E',
            templateUrl: 'app/common/countdownTimer.html',
            scope: {
                timeAllotted: '=',
                startFlag: '=',
                timeoutCallback: '='
            },
            link: link
        };
        return directive;

        function link(scope, element, attrs) {
            var timeLeft;

            // Set watch on time allotted
            scope.$watch('timeAllotted', function(newValue) {
                timeLeft = newValue;
                scope.minutes = getMinutes(timeLeft);
                scope.seconds = getSeconds(timeLeft);
            });

            // Set watch on start flag
            scope.$watch('startFlag', function(newValue) {
                if(newValue) {
                    scope.timer = $interval(tickFunction, 1000);
                } else {
                    $interval.cancel(scope.timer);
                }
            });

            function getFormattedTimeValue(val) {
                if(val < 10) {
                    val = '0' +  val;
                }
                return val;
            }

            function getMinutes(secs) {
                return getFormattedTimeValue(parseInt(secs / 60));
            }

            function getSeconds(secs) {
                return getFormattedTimeValue(secs % 60);
            }

            function tickFunction(triggerTimeout) {
                timeLeft = timeLeft - 1;
                scope.minutes = getMinutes(timeLeft);
                scope.seconds = getSeconds(timeLeft);
                if(timeLeft <= 0) {
                    scope.timeoutCallback();
                    scope.startFlag = false;
                }
            }
        }
    }
]);

我的问题是timeAllotted上面的手表可以工作，但只是第一次。它由从远程数据源加载的对象的属性设置：

<countdown-timer
    data-time-allotted="vm.timeRemaining" 
    data-start-flag="vm.taskStarted" 
    data-timeout-callback="vm.taskTimeout">
</countdown-timer>

所有这一切都很好。timeLeft当数据发生变化时，指令会正确更新其局部变量vm.timeRemaining（它初始化为 0，然后在其他对象可用时更新）。

但是，我还希望提供在超时条件发生后延长时间的选项。但是当我vm.timeRemaining在超时条件之后更新时，$watch不会触发 on 指令。

这是我当前尝试更新控制器的剩余时间：

function extendTime() {
    // This should reset the clock back to it's starting time, 
    // but it doesn't change!
    vm.timeRemaining = vm.task.time_limit;

    vm.hasAccess = true;
    dismissModal();

    // Added timeout so I could try $scope.$apply().. didn't help
    $timeout(function() {

        $scope.$apply();

        // This confirms that vm.timeRemaining is updating here, but the 
        // $watch on timeAllotted isn't firing in the directive
        console.log('timeRemaining updated');
        console.log(vm.timeRemaining);

        startTask();
    }, 50);

}

对于它的价值，任务超时并没有做太多有趣的事情：

function taskTimeout() {
    // Cancels timer
    pauseTask();
    // Synchronizes data with API
    syncTick();
    // Opens a modal
    vm.modalInstance = $modal.open({
        templateUrl: 'app/common/timeoutModal.html',
        scope: $scope
    });
}

知道为什么在我的指令的绑定变量上无法识别vm.timeRemaining我的控制器功能的更新吗？extendTime$watchtimeAllotted

更新

下面是从我的数据上下文中检索任务的函数（它基本上只是一个存储库容器）。一旦 promise 被解决，vm.timeRemaining就会被更新，并且在这种情况下，被$watch指令正确地编辑：

function getTask() {
    return datacontext.task.loadForLevel(level)
        .then(function(results) {
            vm.task = results[0];
            vm.timeRemaining = vm.task.time_limit;
        })
    ;
}
4

0 回答 0