javascript - AngularJS除范围变量失败

我使用angular-timer。

这有效:

{{ (seconds / 10) * 100 }}

但这不是:

{{ (seconds / secondsToAnswer ) * 100 }

(以NaN计算)

但是，我在 Controller 中将secondsToAnswer设置为10:$scope.secondsToAnswer = 10;它也发生在指令之外。

完整代码:

的HTML

<timer interval="1000">
  <div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped"
         role="progressbar"
         aria-valuenow="20"
         aria-valuemin="0"
         aria-valuemax="100"
         style="width: {{ (seconds / secondsToAnswer) * 100 }}%">
    </div>
  </div>
</timer>

JS

'use strict';

vocabApp.controller('PracticeController', function ($scope) {

  $scope.expressions = [
    { expression:'cat', meaning:'macska' },
    { expression:'dog', meaning:'kutya' },
    { expression:'whale', meaning:'bálna' }
  ];

  //$scope.timerRunning = true;

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

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

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

})

最佳答案

这是因为$scope.secondsToAnswer = 10;仅在startTimer运行时才执行，直到该时间$scope.secondsToAnswer未定义。

如果将$scope.secondsToAnswer = 10;设置为 Controller 的第一行，则它应该可以工作。