Question

我有一个AngularJS页面，其中包含以下按钮：

<button class="ui button" ng-click="startTimer()" ng-show="!timerRunning">START</button>
<button class="ui button" ng-click="stopTimer()" ng-show="timerRunning">STOP</button>

我也在控制器中定义了这段代码：

$scope.timerRunning = false;
$scope.timerDone = false;


$scope.startTimer = function () {
    $scope.$broadcast('timer-start');
    $scope.timerRunning = true;
    $scope.timerDone = false;
};

$scope.stopTimer = function () {
    $scope.$broadcast('timer-stop');
    $scope.timerRunning = false;
    $scope.timerDone = true;
};


$scope.$on('timer-stopped', function (event, data) {
    console.log('Timer Stopped - data = ', data);
});

$scope.$on('timer-tick', function (event, args) {
    if (args.millis == 0) {
        $scope.stopTimer();
    }
});

我希望当计时器达到0时（它是一个倒数计时器taken from here），标志timerDone和timerRunning将会改变，按钮也会显示。但事实上它并没有发生。我调试了它，看到我进入stopTimer()方法并且变量被更改但按钮保持隐藏/显示分别与定时器命中0 之前相同。

我想我在这里遗漏了一些东西，因为我对角度很新，但我无法弄清楚如何克服这个问题。

Answer 1

看起来像Rob J是正确的原型继承问题。我所做的是修复偶数监听器如下（添加$scope.$apply()）：

$scope.$on('timer-tick', function (event, args) {
    if (args.millis == 0) {
        $scope.stopTimer();
        $scope.$apply();
    }
});

尝试绑定在事件中更改的变量

1 个答案: