Angularjs除范围变量失败

Question

我使用角度计时器.

这有效:

{{ (seconds / 10) * 100 }}

但是这个没有:

{{ (seconds / secondsToAnswer ) * 100 }

(评估为NaN)

但是,我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);
  });

})

Answer 1

这是因为$scope.secondsToAnswer = 10;只有在startTimer运行时才会执行,直到该时间$scope.secondsToAnswer未定义.

如果您$scope.secondsToAnswer = 10;在控制器中创建第一行,那么它应该可以工作.